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监听, ...
随机推荐
- Linux Kernel 4.7版本发布
导读 在经历了长达一周的惬意假日时光,大神Linus Torvalds宣布面向所有GNU/Linux操作系统发布Linux Kernel 4.7.Linux 4.7内核的研发历经2个多月,自今年5月2 ...
- LAMP集群项目
vi /etc/sysconfig/network 一.安装硬件环境(安装虚拟机) 1.安装VMware步骤 1.修改网卡配置 vi /etc/sysconfig/network-scripts/if ...
- maven仓库加载本地包依赖
如果有个jar包是我们自己打的,怎么放到maven中呢? 首先在项目里面新建一个lib目录,如果有lib目录则不需要新建,然后放自己的jar包进去,maven的pom.xml配置是: <depe ...
- JS实现关闭当前子窗口，刷新父窗口及调用父窗口的方法
一.js实现关闭当前子窗口,刷新父窗口 JS代码如下: <script> function refreshParent() { window.opener.location.href = ...
- 1044: Access denied for user 'hehe'@'localhost' to database 'imooc'
当我使用 mysql授予用户时, GRANT ALL PRIVILEGES ON *.* TO hehe IDENTIFIED BY 'some' WITH GRANT OPTION; 出现:1044 ...
- Storm-源码分析- Multimethods使用例子
1. storm通过multimethods来区分local和distributed模式 当调用launch-worker的时候, clojure会自动根据defmulti里面定义的fn来判断是调用哪 ...
- MySQL和时间戳有关的函数
1. MySQL 获得当前时间戳函数:current_timestamp, current_timestamp()mysql> select current_timestamp, current ...
- js小数四舍五入，保留两位小数
直接用用number.toFixed(2)即可 <template> <section class="p-10"> <h1> {{ number ...
- mysql之引擎、Explain、权限详解
引擎 简介 Innodb引擎 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基 ...
- Python中字符串拼接的N种方法
python拼接字符串一般有以下几种方法: ①直接通过(+)操作符拼接 s = 'Hello'+' '+'World'+'!'print(s) 输出结果:Hello World! 使用这种方式进行字符 ...