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监听, ...
随机推荐
- windows mysql初始化
参考文章 https://dev.mysql.com/doc/refman/5.7/en/windows-install-archive.html mysqld --initialize --user ...
- jenkins提交SVN文件
需求背景: 公司有内网和外网两台SVN服务器,都需要维护相同的配置文件,但是我们想能否在内网修改配置文件后同时提交到外网SVN服务器上. 开发人员操作步骤 1.开发人员在IDE中checkout内网c ...
- 虚拟机VMWare安装苹果系统MacOS详细教程（联网设置，全屏插件、文件互传）
运行环境: VMware® Workstation 12 Pro(自行安装,或者用这个) 推荐(下面以10.11.6版本做的教程,但是安装时推荐使用此版本安装然后升级到10.11.6):MacOS X ...
- Python全栈day18（迭代器协议和for循环工作机制）
一,什么是迭代和递归 递归和迭代都是循环的一种. 简单地说,递归是重复调用函数自身实现循环.迭代是函数内某段代码实现循环,而迭代与普通循环的区别是:循环代码中参与运算的变量同时是保存结果的变量,当前保 ...
- Linux 常用资源
kernel:ftp://kernel.orgcnkernel:http://www.cnkernel.orgoldlinux:http://www.oldlinux.orgminix3:http:/ ...
- Elasticsearch 中文分词(elasticsearch-analysis-ik) 安装
由于elasticsearch基于lucene,所以天然地就多了许多lucene上的中文分词的支持,比如 IK, Paoding, MMSEG4J等lucene中文分词原理上都能在elasticsea ...
- win下自动sftp脚本定时下载文件
缘起一个BA与客户交流的软件.但因为数据不能通过系统直连的方式进行获取. 对方只提供每天一份全量数据到指定文件夹下,我方自动通过sftp的方式去拉取. 一个只有简单几行的操作,想必肯定是不可能需写程序 ...
- OKEx量化分析报告[2017-12-19]
[分析时间]2017-12-19 09:05 [分析对象]OKEx [有效期限]2017-12-19 09:00:00 — 2017-12-19 09:59:59 [报告内容]DASH_USDT ...
- vue下登录页背景图上下空白处自适应等高
遇到需求,登录页面需要顶部和底部上下等高,并且随着浏览器自适应上下高度. 解决方法: vue界面的data中先定义 data() { return { windowHeight: "&quo ...
- replace未全局替换的坑
今天是名副其实的周六.悠闲了一早上(太阳). 真是人在家中坐,BUG自天上来.哈哈其实也不是自天上来,还是自己之前埋下的雷. 所以修复完线上的bug,我脑中立刻浮现出两件还需要做的事情: 一,就是我现 ...