Tutorial on using Localstorage in HTML5_html5 tutorial skills

What is localstorage

A few days ago, I found that the operation of cookies was very strange in an old project. After consulting, I wanted to cache some information to avoid passing parameters on the URL, but I did not consider the problems that cookies would cause:

　① The cookie size is limited to about 4k, which is not suitable for storing business data
　② Cookies are sent together with HTTP transactions each time, which wastes bandwidth

We are doing mobile projects, so the technology that is really suitable to use here is localstorage. Localstorage can be said to be an optimization of cookies. It can be used to store data on the client conveniently and will not be transmitted with HTTP, but it is not No problem:

　① The size of localstorage is limited to about 5 million characters, and different browsers are inconsistent
　② Localstorage cannot be read in privacy mode
　③ The essence of localstorage is to read and write files. If there is a lot of data, it will be stuck (firefox will Importing data into memory at one time is scary when you think about it)
④ localstorage cannot be crawled by crawlers, do not use it to completely replace URL parameter passing

Flaws do not hide the advantages, the above problems can be avoided, so our focus should be on how to use localstorage, and how to use it correctly.
Usage of localstorage
Basic knowledge

There are two types of localstorage storage objects:

　① sessionStrage: session means session. The session here refers to the time period from entering the website to closing the website when the user browses a website. The validity period of the session object is only so long.

　② localStorage: Save the data on the client hardware device, no matter what it is, which means that the data will still be there when the computer is turned on next time.

The difference between the two is that one is for temporary storage and the other is for long-term storage.

Here is a simple code to illustrate its basic use:

XML/HTML CodeCopy content to clipboard

1. div id="msg" style="margin: 10px 0; border: 1px solid black; padding: 10px; width: 300px;   
2.   height: 100px;">  
3. div>  
4. input type="text" id="text" />  
5. select id="type">  
6.   option value="session">sessionStorageoption>  
7.   option value="local">localStorageoption>  
8. select>  
9. button onclick="save();">  
10.   保存数据button>  
11. button onclick="load();">  
12.   读取数据button>  
13. script type="text/javascript">  
14.   var msg = document.getElementById('msg'),   
15.             text = document.getElementById('text'),   
16.             type = document.getElementById('type');   
17.   
18.   function save() {   
19.     var str = text.value;   
20.     var t = type.value;   
21.     if (t == 'session') {   
22.       sessionStorage.setItem('msg', str);   
23.     } else {   
24.       localStorage.setItem('msg', str);   
25.     }   
26.   }   
27.   
28.   function load() {   
29.     var t = type.value;   
30.     if (t == 'session') {   
31.       msg.innerHTML = sessionStorage.getItem('msg');   
32.     } else {   
33.       msg.innerHTML = localStorage.getItem('msg');   
34.     }   
35.   }   
36. script>  

　真实场景

　　实际工作中对localstorage的使用一般有以下需求：

　　① 缓存一般信息，如搜索页的出发城市，达到城市，非实时定位信息

　　② 缓存城市列表数据，这个数据往往比较大

　　③ 每条缓存信息需要可追踪，比如服务器通知城市数据更新，这个时候在最近一次访问的时候要自动设置过期

　　④ 每条信息具有过期日期状态，在过期外时间需要由服务器拉取数据

XML/HTML Code复制内容到剪贴板

1. define([], function () {
3. var Storage = _.inherit({
4. //Default attributes
5. properties: function () {
7. //Proxy object, default is localstorage
8. this.sProxy = window.localStorage;
10. //60 * 60 * 24 * 30 * 1000 ms ==30 days
11. this.defaultLifeTime = 2592000000;
13. //Local cache is used to store the mapping between all localstorage key values ​​and expiration dates
14. this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';
16. //When the cache capacity is full, the number of caches deleted each time
17. this.removeNum = 5;
19. },
21. assert: function () {
22. if (this.sProxy === null) {
23. throw 'not override sProxy property';
24. }  
25. },
27. initialize: function (opts) {
28. this.propertys();
29. this.assert();
30. },
32. /*
33. Add localstorage
34. Data format includes unique key value, json string, expiration date, deposit date
35. sign is a formatted request parameter, used to return new data when the same request has different parameters. For example, if the list is the city of Beijing, and then switched to Shanghai, it will judge that the tag is different and update the cached data. The tag is equivalent to Signature
36. Only one piece of information will be cached for each key value
37. */
38. set: function (key, value, timeout, sign) {
39. var _d = new Date();
40. //Deposit date
41. var indate = _d.getTime();
43. //Finally saved data
44. var entity = null;
46. if (!timeout) {
47. _d.setTime(_d.getTime() this.defaultLifeTime);
48. timeout = _d.getTime();
49. }  
51. //
52. this.setKeyCache(key, timeout);
53. entity = this.buildStorageObj(value, indate, timeout, sign);
55. try {
56. this.sProxy.setItem(key, JSON.stringify(entity));
57. return true;
58. } catch (e) {
59. //When localstorage is full, clear it all
60. if (e.name == 'QuotaExceededError') {
61. // this.sProxy.clear();
62. //When localstorage is full, select the data closest to the expiration time to delete. This will also have some impact, but it feels better than clearing it all. If there are too many caches, this process will be more time-consuming, within 100ms
63. if (!this.removeLastCache()) throw 'The amount of data stored this time is too large';
64. this.set(key, value, timeout, sign);
65.                                                               
console && console.log(e);
}
67. return false;
68. },
70. //Delete expired cache
71. removeOverdueCache: function () {
72. var tmpObj = null, i, len;
74. var now = new Date().getTime();
75. //Get the key-value pair
76. var cacheStr = this.sProxy.getItem(this.keyCache);
77. var cacheMap = [];
78. var newMap = [];
79. if (!cacheStr) {
80. return;
81. }  
83. cacheMap = JSON.parse(cacheStr);
85. for (i = 0, len = cacheMap.length; i len; i ) {
86. tmpObj = cacheMap[i];
87. if (tmpObj.timeout now) {
88. this.sProxy.removeItem(tmpObj.key);
89. } else {
90. newMap.push(tmpObj);
91.                                                               
}  
this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));
},
96. removeLastCache: function () {
97. var i, len;
98. var num = this.removeNum || 5;
100. //Get the key-value pair
101. var cacheStr = this.sProxy.getItem(this.keyCache);
102. var cacheMap = [];
103. var delMap = [];
105. //Indicates that the storage is too large
106. if (!cacheStr) return false;
108. cacheMap.sort(function (a, b) {
109. return a.timeout - b.timeout;
110. });
112. //What data was deleted
113. delMap = cacheMap.splice(0, num);
114. for (i = 0, len = delMap.length; i len; i ) {
115. this.sProxy.removeItem(delMap[i].key);
116. }  
118. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));
119. return true;
120. },
122. setKeyCache: function (key, timeout) {
123. if (!key || !timeout || timeout new Date().getTime( )) return;
124. var i, len, tmpObj;
126. //Get the currently cached key value string
127. var oldstr = this.sProxy.getItem(this.keyCache);
128. var oldMap = [];
129. //Whether the current key already exists
130. var flag = false;
131. var obj = {};   
132.       obj.key = key;   
133.       obj.timeout = timeout;   
134.   
135.       if (oldstr) {   
136.         oldMap = JSON.parse(oldstr);   
137.         if (!_.isArray(oldMap)) oldMap = [];   
138.       }   
139.   
140.       for (i = 0, len = oldMap.length; i  len; i ) {   
141.         tmpObj = oldMap[i];   
142.         if (tmpObj.key == key) {   
143.           oldMap[i] = obj;   
144.           flag = true;   
145.           break;   
146.         }   
147.       }   
148.       if (!flag) oldMap.push(obj);   
149.       //最后将新数组放到缓存中   
150.       this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));   
151.   
152.     },   
153.   
154.     buildStorageObj: function (value, indate, timeout, sign) {   
155.       var obj = {   
156.         value: value,   
157.         timeout: timeout,   
158.         sign: sign,   
159.         indate: indate   
160.       };   
161.       return obj;   
162.     },
164. get: function (key, sign) {
165. var result, now = new Date().getTime();
166. try {
167. result = this.sProxy.getItem(key);
168. if (!result) return null;
169. result = JSON.parse(result);
171. //Data expiration
172. if (result.timeout now) return null;
174. //Signature verification is required
175. if (sign) {
176. if (sign === result.sign)
177. return result.value;
178. return null;
179. } else {
180. return result.value;
181.                                                               
} catch (e) {
console && console.log(e);
}  
return null;
},
//Get signature
getSign: function (key) {
var result,
191. sign = null;
try {
193. result = this.sProxy.getItem(key);
if (result) {
195. result = JSON.parse(result);
196. sign = result && result.sign
                                                              
197. } catch (e) {
198. console && console.log(e);
199. }  
200.       return sign;   
201.     },   
202.   
203.     remove: function (key) {   
204.       return this.sProxy.removeItem(key);   
205.     },   
206.   
207.     clear: function () {   
208.       this.sProxy.clear();   
209.     }   
210.   });   
211.   
212.   Storage.getInstance = function () {   
213.     if (this.instance) {   
214.       return this.instance;   
215.     } else {   
216.       return this.instance = new this();   
217.     }   
218.   };   
219.   
220.   return Storage;   
221.   
222. });  

这段代码包含了localstorage的基本操作，并且对以上问题做了处理，而真实的使用还要再抽象：

XML/HTML Code复制内容到剪贴板

1. define(['AbstractStorage'], function (AbstractStorage) {
3. var Store = _.inherit({
4. //Default attributes
5. properties: function () {
7. //Each object must have a storage key and cannot be repeated
8. this.key = null;
10. //The default life cycle of a piece of data, S is seconds, M is minutes, D is days
11. this.lifeTime = '30M';
13. //Default return data
14. // this.defaultData = null;
16. //Proxy object, localstorage object
17. this.sProxy = new AbstractStorage();
19. },
21. setOption: function (options) {
22. _.extend(this, options);
23. },
25. assert: function () {
26. if (this.key === null) {
27. throw 'not override key property';
28. }  
29. if (this.sProxy === null) {
30. throw 'not override sProxy property';
31. }  
32. },
34. initialize: function (opts) {
35. this.propertys();
36. this.setOption(opts);
37. this.assert();
38. },   
39.   
40.     _getLifeTime: function () {   
41.       var timeout = 0;   
42.       var str = this.lifeTime;   
43.       var unit = str.charAt(str.length - 1);   
44.       var num = str.substring(0, str.length - 1);   
45.       var Map = {   
46.         D: 86400,   
47.         H: 3600,   
48.         M: 60,   
49.         S: 1   
50.       };   
51.       if (typeof unit == 'string') {   
52.         unitunit = unit.toUpperCase();   
53.       }   
54.       timeout = num;   
55.       if (unit) timeout = Map[unit];   
56.   
57.       //单位为毫秒   
58.       return num * timeout * 1000 ;   
59.     },   
60.   
61.     //缓存数据   
62.     set: function (value, sign) {   
63.       //获取过期时间   
64.       var timeout = new Date();   
65.       timeout.setTime(timeout.getTime()   this._getLifeTime());   
66.       this.sProxy.set(this.key, value, timeout.getTime(), sign);   
67.     },   
68.   
69.     //设置单个属性   
70.     setAttr: function (name, value, sign) {   
71.       var key, obj;   
72.       if (_.isObject(name)) {   
73.         for (key in name) {   
74.           if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);   
75.         }  
76.         return;   
77.       }   
78.   
79.       if (!sign) sign = this.getSign();   
80.   
81.       //获取当前对象   
82.       obj = this.get(sign) || {};   
83.       if (!obj) return;   
84.       obj[name] = value;   
85.       this.set(obj, sign);   
86.   
87.     },   
88.   
89.     getSign: function () {   
90.       return this.sProxy.getSign(this.key);   
91.     },   
92.   
93.     remove: function () {   
94.       this.sProxy.remove(this.key);   
95.     },   
96.   
97.     removeAttr: function (attrName) {   
98.       var obj = this.get() || {};   
99.       if (obj[attrName]) {   
100.         delete obj[attrName];   
101.       }   
102.       this.set(obj);   
103.     },   
104.   
105.     get: function (sign) {   
106.       var result = [], isEmpty = true, a;   
107.       var obj = this.sProxy.get(this.key, sign);   
108.       var type = typeof obj;   
109.       var o = { 'string': true, 'number': true, 'boolean': true };   
110.       if (o[type]) return obj;   
111.   
112.       if (_.isArray(obj)) {   
113.         for (var i = 0, len = obj.length; i  len; i ) {   
114.           result[i] = obj[i];   
115.         }  
116.       } else if (_.isObject(obj)) {   
117.         result = obj;   
118.       }   
119.   
120.       for (a in result) {   
121.         isEmpty = false;   
122.         break;   
123.       }   
124.       return !isEmpty ? result : null;   
125.     },   
126.   
127.     getAttr: function (attrName, tag) {   
128.       var obj = this.get(tag);   
129.       var attrVal = null;   
130.       if (obj) {   
131.         attrVal = obj[attrName];   
132.       }   
133.       return attrVal;   
134.     }   
135.   
136.   });   
137.   
138.   Store.getInstance = function () {   
139.     if (this.instance) {   
140.       return this.instance;   
141.     } else {   
142.       return this.instance = new this();   
143.     }   
144.   };   
145.   
146.   return Store;   
147. });  

　　我们真实使用的时候是使用store这个类操作localstorage，代码结束简单测试：

　存储完成，以后都不会走请求，于是今天的代码基本结束 ，最后在android Hybrid中有一后退按钮，此按钮一旦按下会回到上一个页面，这个时候里面的localstorage可能会读取失效！一个简单不靠谱的解决方案是在webapp中加入：

XML/HTML Code复制内容到剪贴板

1. window.onunload = function () { };//适合单页应用，不要问我为什么，我也不知道  

　结语

　　localstorage是移动开发必不可少的技术点，需要深入了解，具体业务代码后续会放到git上，有兴趣的朋友可以去了解