LocalStorage存储JSON对象的问题[未测试]

双面人

发布于 2019-04-10 16:38:45

1.4K0

发布于 2019-04-10 16:38:45

文章被收录于专栏：热爱IT热爱IT

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"));

以下的代码部分

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

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018/05/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法