简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

Tutorial on using Localstorage in HTML5_html5 tutorial skills

WBOY
Release： 2016-05-16 15:46:27
Original
1591 people have browsed it

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.                                                               
    66. console && console.log(e);
    67. }
  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.                                                               
    92. }  
    93. this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));
    95. },
  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.                                                               
    183. } catch (e) {
    184. console && console.log(e);
    185. }  
    186. return null;
    187. },
    189. //Get signature
    190. getSign: function (key) {
    191. var result,
  191. sign = null;
    192. try {
  193. result = this.sProxy.getItem(key);
    194. if (result) {
  195. result = JSON.parse(result);
  196. sign = result && result.sign
    197.                                                               
  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，代码结束简单测试：
201579150514318.jpg (488×184)

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

XML/HTML Code复制内容到剪贴板
  1. window.onunload = function () { };//适合单页应用，不要问我为什么，我也不知道  

　结语

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

Related labels：
html5 localstorage
source：php.cn
Previous article：Detailed explanation of the usage of ol tag in HTML5_html5 tutorial skills Next article：Sharing several page examples of HTML5 design and modification_html5 tutorial skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
What is the difference between enctype and formenctype in HTML5? I'm just wondering what's the difference between the attributes enctype and formenctype in...
From 2024-04-02 11:47:56
0
1
275
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！