LocalStorage存储JSON对象的问题

最新推荐文章于 2022-08-29 12:50:59 发布

划水。阳

最新推荐文章于 2022-08-29 12:50:59 发布

阅读量376

点赞数

localStorage - 没有时间限制的数据存储

1 var arr=[1,2,3];
2 localStorage.setItem("temp",arr); //会返回1,2,3
3 console.log(typeof localStorage.getItem("temp"));//string
4 console.log(localStorage.getItem("temp"));//1,2,3

localStorage.setItem() 不会自动将Json对象转成字符串形式

1 var obj = {"a": 1,"b": 2};
2 typeof localStorage.getItem("temp2");//也会返回String
3 localStorage.setItem("temp2", obj);//但是返回[object Object]

用localStorage.setItem()正确存储JSON对象方法是：
存储前先用JSON.stringify()方法将json对象转换成字符串形式
JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串

1 var obj = {"a": 1,"b": 2};
2 obj = JSON.stringify(obj); //转化为JSON字符串
3 localStorage.setItem("temp2", obj);//返回{"a":1,"b":2}

后续要操作该JSON对象，要将之前存储的JSON字符串先转成JSON对象再进行操作

1 obj=JSON.parse(localStorage.getItem("temp2"));

以下是注册模块的部分代码使用angularJS框架编写获取的数据使用LocalStorage存储

 1 <body ng-app="ZhuCeApp">
 2     <!-- ZhuCeCtrl -->
 3     <!-- View -->
 4     <div ng-controller="ZhuCeController">
 5         用 户 名: <input type="text" ng-model="name"><br />
 6         密&nbsp;&nbsp;码: <input type="text" ng-model="pwd"><br />
 7         确认密码: <input type="text" ng-model="pwd2"><br />
 8         <input type="button" value="注册" ng-click="ZhuCe()">
 9         <span class="red">{{message}}</span>
10     </div>
11 
12 </body>

JavaScript部分

  1 <script src="./angular.js"></script>
  2 <script>
  3 
  4     // Model
  5     function PersonInfo ( name, pwd ) {
  6         this.name = name;
  7         this.pwd = pwd;
  8     } 
  9 
 10     /* PersonInfo.prototype.send = function ( callback ) {
 11         // this 以 ajax 的形式发送到 后台
 12         $.ajax( callback );
 13     } */
 14 
 15     PersonInfo.prototype.saveToLocalStorage = function () {
 16         // 将 this 写入 本地存储
 17         // 先将以前的数据取出来, 然后在合并到数据中, 再写一会去
 18         var storage = window.localStorage.getItem( 'PersonInfo' ); // 第一次 没有数据  undefiend
 19                                                                    // 第二次 "[ { "name": "andim", 'pwd': '123' } ]"
 20 
 21         storage = storage ? JSON.parse( storage ) : [];  // 第一次 storage 是 []
 22                                                          // 第二次 storage 是 [ { "name": "andim", 'pwd': '123' } ]
 23         
 24         // 如果本地存储有数据 就使用 , 如果没有数据 假设他是一个数组
 25         /* if ( storage ) {
 26             // 有数据, 数据 是 字符串
 27             // 应该将其转换成 对象
 28             // eval( str )
 29             // new Function( 'return ' + str ) ()
 30             // JSON.parse( str )
 31             storage = JSON.parse( storage );
 32         } else {
 33             // 没有数据
 34             storage = [];
 35         }
 36         */                                          
 37 
 38 
 39         storage.push( this );  // 第一次 [ { "name": "andim", 'pwd': '123' } ]
 40                                // 第二次  [ { "name": "andim", 'pwd': '123' }, { "name": "zhangsan", "pwd": "123456" } ]
 41 
 42         window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) );
 43     }
 44 
 45 
 46     PersonInfo.selectByName = function ( name ) {
 47         var storage = window.localStorage.getItem( 'PersonInfo' );
 48         storage = storage ? JSON.parse( storage ) : [];
 49 
 50         return storage.some(function ( v ) {
 51             return v.name === name;
 52         });
 53     } 
 54 
 55     // Controller
 56     angular.module( 'ZhuCeApp', [] )
 57         .controller( 'ZhuCeController', function ( $scope ) {
 58             
 59             // 处理逻辑
 60             $scope.ZhuCe = function () {
 61                 $scope.message = '';
 62                     
 63                 // 1 需要验证用户的输入
 64                 var name = $scope.name, 
 65                     pwd = $scope.pwd, 
 66                     pwd2 = $scope.pwd2;
 67                     
 68                 if ( name === undefined || name.trim().length === 0 ||
 69                      pwd === undefined || pwd.trim().length === 0 ||
 70                      pwd2 === undefined || pwd2.trim().length === 0 ) {
 71                     $scope.message = '请输入完整信息';
 72                     return;
 73                 }
 74 
 75                 
 76                 // 2 如果输入了内容验证密码输入是否一致
 77                 if ( pwd !== pwd2 ) {
 78                     $scope.message = '两次密码输入不一致';
 79                     return;
 80                 }
 81                 
 82                 // 判断 名字是否已被使用
 83                 if ( PersonInfo.selectByName( name ) ) {
 84                     $scope.message = '该用户已存在....';
 85                     return;
 86                 }
 87                 
 88                 
 89                 // 3 写入数据库( localStorage )
 90                 var data = new PersonInfo( name, pwd );
 91 
 92                 // 写到 本地存储中
 93                 data.saveToLocalStorage();
 94 
 95                 /*
 96                 data.send(function ( success ) {
 97                    if ( success ) {
 98                        // 成功后进行跳转 ....
 99                    }
100                 });
101                 */
102 
103                 $scope.name = $scope.pwd = $scope.pwd2 = '';
104             }
105         });
106 </script>