如何使用 localstorage 将数据发送到另一个 html 文件（不是 SPA） - angularjs答案

【问题标题】：How to use localstorage to send data into another html file(NOT SPA) - angularjs如何使用 localstorage 将数据发送到另一个 html 文件（不是 SPA） - angularjs
【发布时间】：2018-01-02 11:30:39
【问题描述】：

我没有使用 SPA 应用程序，所以如果我单击页面加载的另一个 html 文件，所以我无法捕获数据，我想存储在该本地存储中。

这是我的控制器文件：

angular
    .module('myApp', [])
    .controller('myController', function($scope, $rootScope) {

        $scope.users = [{
                name: 'sameer',
                age: 21
            },
            {
                name: 'ganesh',
                age: 22
            }
        ]

        $scope.setcontactModal = function(user) {
            $scope.modalcontactData = user;
       }
   });

我的第一个索引页：

<body ng-controller='myController'>
    <table class="table">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Operations</th>
        </tr>
        <tr ng-repeat='user in users'>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
            <td> <a href="edit.html" ng-click='setcontactModal(user)'> Apply </a> </td>
        </tr>
    </table>
</body>

我想将此 $scope.modalcontactData 共享到另一个名为 edit.html 的文件中：

这是我的另一个名为 edit.html

的 html 文件

<body ng-controller='myController'>
        <p>hello {{modalcontactData}} </p>
</body>

我试过了：

angular
    .module('myApp', ['ngStorage'])
    .controller('myController', function($scope, $rootScope,$localStorage) {

        $scope.users = [{
            name: 'sameer',
            age: 21
        }, {
            name: 'ganesh',
            age: 22
        }]

        $localStorage.modalcontactData = $scope.modalcontactData;

        $scope.setcontactModal = function(user) {
            $scope.modalcontactData = user;
            console.log('scope:', $scope.modalcontactData);
         }
    });

【问题讨论】：

一个查询字符串可能会更好。
你能展示一下你到目前为止所做的尝试吗？ Angular 中本地存储的使用有很好的记录，您肯定至少已经尝试过您在网上找到的内容。
我尝试了 ngStorage 依赖，并尝试了 $localStorage ，但我没有得到数据。它在页面加载时隐藏
把代码贴在你实际使用LocalStorage的地方。
查看我更新的问题@TsvetanGanev

标签： javascript arrays angularjs json

【解决方案1】：

在你的情况下，你可以像这样使用本地存储。

工作演示：https://plnkr.co/edit/84V6v7qkeE62hI1eU0eu

angular
    .module('myApp', ['ngStorage'])
    .controller('myController', function($scope, $rootScope) {
 $scope.modalcontactData=JSON.parse(window.localStorage.getItem("user"))
        $scope.users = [{
            name: 'sameer',
            age: 21
        }, {
            name: 'ganesh',
            age: 22
        }]
      

        $scope.setcontactModal = function(user) {
            $scope.modalcontactData = user;             window.localStorage.setItem("user",JSON.stringify(user));
            console.log('scope:', $scope.modalcontactData);
         }
    });

【讨论】：

【解决方案2】：

如果您想将数据存储在本地存储中，您可以使用 local forage，它是一个非常有用的库，用于存储和检索 json 格式的数据。

只需将此文件添加到您的 index.html https://github.com/localForage/localForage/blob/master/dist/localforage.js

<script src="js/localforage.js"></script>

现在您可以使用这些简单的功能轻松地以 json 格式存储或检索本地存储中的数据。要保存数据，您可以使用-

localforage.setItem("modelContactData", user);

并使用检索数据-

localforage.getItem("modelContactData",function(err,data){
     console.log(data);
});

【讨论】：