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监听, ...
随机推荐
- C语言程序真正的启动函数
为什么要用”真正”这个词?因为我们从学C语言开始,都会先明白这个道理,即C语言有且仅有一个main函数,main函数是C语言的入口点和出口点!(可以参考>http://www.dotcpp.co ...
- cocos lua 加密方案
cocos2d使用的是luajit,lua原生编译出来的bytecode和luajit是不兼容的,所以直接用luac法编译出来的bytecode脚本无法在cocos2d中使用. 目前所指的解决方案有2 ...
- 二 Android Studio 打包EgretApp (开机画面、横竖屏、调试、和原生交互)
测试环境: Windows7 Egret Engine 5.0.14 Egret support 5.0.12 Android Studio 2.3 目录: 一 修改开机画面 二 横竖屏设置 三 修改 ...
- [分享] 关于App Store下载到一半发生错误的问题 [复制链接]
问题:昨天发现Pages无法更新,结果卸载在App Store里重新下载.下载到快结束的时候,提示“发生错误”,同时提示“在‘已购’中再试一次”.结果在已购中,Pages显示的是安装按钮,点击安装,显 ...
- Vue基础-作用域插槽-列表组件
Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...
- Struts2中的类型转换失败
类型转换失败: 若 Action 类没有实现 ValidationAware 接口: Struts 在遇到类型转换错误时仍会继续调用其 Action 方法, 就好像什么都没发生一样. 若 Action ...
- HDU3306—Another kind of Fibonacci
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3306 题目意思:一个斐波那契数列的变式,本来是A[n]=A[n-1]+A[n-2],现在变成A[n]= ...
- 浅析pc机上如何将vmlinuz-2.6.31-14-generic解压出vmlinux
浅析pc机上如何将vmlinuz-2.6.31-14-generic解压出vmlinux luther@gliethttp:~$ vim /boot/grub/grub.cfg 可以看到我们进入的系统 ...
- new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
new运算符 - JavaScript | MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operator ...
- intelij IDEA在启动tomcat时控制台日志乱码
1.在idea安装目录的bin下修改idea.exe.vmoptions和idea64.exe.vmoptions,添加 -Dfile.encoding=UTF-8 -Dconsole.encodin ...