非SPA场景下AngularJS如何通过localStorage实现跨HTML页面传值

我看你已经尝试用ngStorage来解决非SPA场景下的页面间数据共享问题了，但问题出在数据同步的时机和方向上。咱们一步步来修正：

问题分析 #

你当前的代码里，只是在控制器初始化时把$scope.modalcontactData赋值给$localStorage，但点击Apply按钮时，只更新了$scope上的数据，并没有同步到localStorage里；而且edit.html页面加载时，控制器也没有从$localStorage里把数据读回到$scope，所以自然拿不到数据。

修正步骤 #

1. 确保正确引入ngStorage脚本
   先确认你的页面里已经引入了ngStorage.js（放在AngularJS核心脚本之后）：

   <script src="angular.js"></script>
   <script src="angular-local-storage.js"></script>
   

2. 修改控制器代码，同步数据到localStorage
   我们需要在点击事件里把选中的用户数据直接存入$localStorage，同时在控制器初始化时，把$localStorage里的数据同步到当前$scope，这样新页面加载时就能拿到数据：

   angular.module('myApp', ['ngStorage'])
     .controller('myController', function($scope, $localStorage) {
       $scope.users = [
         { name: 'sameer', age: 21 },
         { name: 'ganesh', age: 22 }
       ];
   
       // 初始化时从localStorage读取数据到当前scope
       $scope.modalcontactData = $localStorage.modalcontactData || {};
   
       $scope.setcontactModal = function(user) {
         // 把选中的用户数据存入localStorage，用angular.copy避免引用问题
         $localStorage.modalcontactData = angular.copy(user);
         // 同步到当前scope（保持数据一致性）
         $scope.modalcontactData = $localStorage.modalcontactData;
         console.log('已存储的数据:', $localStorage.modalcontactData);
       };
     });
   

3. 优化edit.html页面的显示逻辑
   因为控制器初始化时已经把$localStorage的数据同步到$scope了，页面可以直接显示具体的属性（之前直接显示对象会输出[object Object]，建议显示字段）：

   <body ng-controller='myController'>
     <p>Hello {{modalcontactData.name}}! Your age is {{modalcontactData.age}}</p>
   </body>
   

额外注意事项 #

• 使用angular.copy(user)是为了避免引用类型的关联问题，确保存储的是独立的数据副本
• 如果不需要长期保留数据，在edit.html页面处理完数据后，可以删除localStorage里的对应项：delete $localStorage.modalcontactData;
• ngStorage会自动处理数据的序列化和反序列化，无需手动调用JSON.stringify或JSON.parse

内容的提问来源于stack exchange，提问作者Sameer