- 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>
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>
