LocalStorage存储JSON对象的问题
LocalStorage存储JSON对象的问题
- 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 密 码: <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>
LocalStorage存储JSON对象的问题的更多相关文章
- localStorage存储JSON对象的小方法
有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有: 1 缓存数据 2 减少对内存的占用 但是,storage只能存储字符串的数据,对于JS中常用的数 ...
- sessionStorage存储json对象
应用场景: 账单列表中A页面:点击其中的一列,ajax返回的数据在这一页 点击进入账单详情B页面: 因为在A页面已经做过ajax的请求了,所以希望把当前其中的一个数组对象传到B页面中,所以,就考虑到暂 ...
- 在 sessionStorage存储json对象
目的:A页面存的东西要从B页面拿到 因为sessionStorage.setItem("key","value")内存储的都是字符串,所以,如果以对象的形式存到 ...
- localStorage存储返回过来的对象 显示object object的问题
localStorage.setItem() 不会自动将Json对象转成字符串形式 用localStorage.setItem()正确存储JSON对象方法是: 存储前先用JSON.stringify( ...
- 使用sessionStorage、localStorage存储数组与对象（转）
http://my.oschina.net/crazymus/blog/371757 使用sessionStorage.localStorage存储数组与对象 发表于3个月前(2015-01-26 1 ...
- localStorage 如何存储JSON数据并读取JSON数据
localStorage是HTML5提供的再客户端实现本地存储的一种方法,但是localStorage方法只能存储字符串数据,有时候我们需要存储对象到本地比如:JSON:那么,localStorage ...
- 使用sessionStorage、localStorage存储数组与对象
先介绍一下localStorage localStorage对象是HTML5的客户端存储持久化数据的方案.为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一 ...
- localStorage存储对象，sessionStorage存储数组对象
前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个 ...
- localStorage存储数组，对象，localStorage,sessionStorage存储数组对象
localStorage存储数组,对象,localStorage,sessionStorage存储数组对象 前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听, ...
随机推荐
- 13个非常实用的JavaScript小技巧
使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用 ...
- 写一个SingleTon，（饿最终、懒同步）
1.饿汉式: public class SingleTon { private SingleTon(){ } private final static SingleTon instance = new ...
- OOXML，XLSX分析
07以上的xlsx是使用了OOXML和zip,将后缀修改为.zip,就可以看到文件,主要分析xl目录下的文件,如图: 主要数据文件在xl目录下面 styles.xml里面存放着excel的样式数据 很 ...
- System.getProperty()方法大全 （转载）
System.out.println("java版本号:" + System.getProperty("java.version")); // java版本号S ...
- 160411、实时监控mysql数据库变化
对于二次开发来说,很大一部分就找找文件和找数据库的变化情况 对于数据库变化.还没有发现比较好用的监控数据库变化监控软件. 今天,我就给大家介绍一个如何使用mysql自带的功能监控数据库变化 1.打开数 ...
- 第十一课——codis-server的高可用，对比codis和redis cluster的优缺点
[作业描述] 1.配置codis-ha 2.总结对比codis的集群方式和redis的cluster集群的优缺点 =========================================== ...
- Python进阶知识
装饰器 迭代器 生成器 mixins 元编程 描述符 量化领域常用 列表推导式 字典推导式 高阶函数 lambda函数 三目表达式
- window 如何枚举设备并禁用该设备和启用该设备？如何注册设备热拔插消息通知？
目前实现的功能: 1.设备枚举 2.设置设备禁用和启用 3.注册设备热拔插消息通知 4.获取设备 vid pid 数值 需要链接的库 SetupAPI.lib DeviceManager 类如下: D ...
- 重点：怎样正确的使用QThread类（很多详细例子的对比，注意：QThread 中所有实现的函数是被创建它的线程来调用的，不是在线程中）good
背景描述: 以前,继承 QThread 重新实现 run() 函数是使用 QThread唯一推荐的使用方法.这是相当直观和易于使用的.但是在工作线程中使用槽机制和Qt事件循环时,一些用户使用错了.Qt ...
- Linux的概念与体系(转)
学linux就用它了 http://www.cnblogs.com/vamei/archive/2012/10/10/2718229.html