千家信息网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 开发技术 >

如何使用HTML5中Localstorage

发表于：2025-01-23 作者：千家信息网编辑
千家信息网最后更新 2025年01月23日，这篇文章主要讲解了"如何使用HTML5中Localstorage"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"如何使用HTML5中Localstora
千家信息网最后更新 2025年01月23日如何使用HTML5中Localstorage

这篇文章主要讲解了"如何使用HTML5中Localstorage"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"如何使用HTML5中Localstorage"吧！

什么是localstorage

　　前几天在老项目中发现有对cookie的操作觉得很奇怪，咨询下来是要缓存一些信息，以避免在URL上面传递参数，但没有考虑过cookie会带来什么问题：

　　① cookie大小限制在4k左右，不适合存业务数据
　　② cookie每次随HTTP事务一起发送，浪费带宽

　　我们是做移动项目的，所以这里真实适合使用的技术是localstorage，localstorage可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输，但也不是没有问题：

　　① localstorage大小限制在500万字符左右，各个浏览器不一致
　　② localstorage在隐私模式下不可读取
　　③ localstorage本质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就觉得吓人啊）
　　④ localstorage不能被爬虫爬取，不要用它完全取代URL传参

　　瑕不掩瑜，以上问题皆可避免，所以我们的关注点应该放在如何使用localstorage上，并且是如何正确使用。
localstorage的使用
　　基础知识

　　localstorage存储对象分为两种：

　　① sessionStrage： session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长。

　　② localStorage： 将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在。

　　两者区别就是一个作为临时保存，一个长期保存。

　　这里来一段简单的代码说明其基本使用：

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

  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. function save() {

  18. var str = text.value;

  19. var t = type.value;

  20. if (t == 'session') {

  21. sessionStorage.setItem('msg', str);

  22. } else {

  23. localStorage.setItem('msg', str);

  24. }

  25. }

  26. function load() {

  27. var t = type.value;

  28. if (t == 'session') {

  29. msg[xss_clean] = sessionStorage.getItem('msg');

  30. } else {

  31. msg[xss_clean] = localStorage.getItem('msg');

  32. }

  33. }

  34. script>

　真实场景

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

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

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

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

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

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

  1. define([], function () {

  2. var Storage = _.inherit({

  3. //默认属性

  4. propertys: function () {

  5. //代理对象，默认为localstorage

  6. this.sProxy = window.localStorage;

  7. //60 * 60 * 24 * 30 * 1000 ms ==30天

  8. this.defaultLifeTime = 2592000000;

  9. //本地缓存用以存放所有localstorage键值与过期日期的映射

  10. this.keyCache = 'SYSTEM_KEY_TIMEOUT_MAP';

  11. //当缓存容量已满，每次删除的缓存数

  12. this.removeNum = 5;

  13. },

  14. assert: function () {

  15. if (this.sProxy === null) {

  16. throw 'not override sProxy property';

  17. }

  18. },

  19. initialize: function (opts) {

  20. this.propertys();

  21. this.assert();

  22. },

  23. /*

  24. 新增localstorage

  25. 数据格式包括唯一键值，json字符串，过期日期，存入日期

  26. sign 为格式化后的请求参数，用于同一请求不同参数时候返回新数据，比如列表为北京的城市，后切换为上海，会判断tag不同而更新缓存数据，tag相当于签名

  27. 每一键值只会缓存一条信息

  28. */

  29. set: function (key, value, timeout, sign) {

  30. var _d = new Date();

  31. //存入日期

  32. var indate = _d.getTime();

  33. //最终保存的数据

  34. var entity = null;

  35. if (!timeout) {

  36. _d.setTime(_d.getTime() + this.defaultLifeTime);

  37. timeout = _d.getTime();

  38. }

  39. //

  40. this.setKeyCache(key, timeout);

  41. entity = this.buildStorageObj(value, indate, timeout, sign);

  42. try {

  43. this.sProxy.setItem(key, JSON.stringify(entity));

  44. return true;

  45. } catch (e) {

  46. //localstorage写满时,全清掉

  47. if (e.name == 'QuotaExceededError') {

  48. // this.sProxy.clear();

  49. //localstorage写满时，选择离过期时间最近的数据删除，这样也会有些影响，但是感觉比全清除好些，如果缓存过多，此过程比较耗时，100ms以内

  50. if (!this.removeLastCache()) throw '本次数据存储量过大';

  51. this.set(key, value, timeout, sign);

  52. }

  53. console && console.log(e);

  54. }

  55. return false;

  56. },

  57. //删除过期缓存

  58. removeOverdueCache: function () {

  59. var tmpObj = null, i, len;

  60. var now = new Date().getTime();

  61. //取出键值对

  62. var cacheStr = this.sProxy.getItem(this.keyCache);

  63. var cacheMap = [];

  64. var newMap = [];

  65. if (!cacheStr) {

  66. return;

  67. }

  68. cacheMap = JSON.parse(cacheStr);

  69. for (i = 0, len = cacheMap.length; i < len; i++) {

  70. tmpObj = cacheMap[i];

  71. if (tmpObj.timeout < now) {

  72. this.sProxy.removeItem(tmpObj.key);

  73. } else {

  74. newMap.push(tmpObj);

  75. }

  76. }

  77. this.sProxy.setItem(this.keyCache, JSON.stringify(newMap));

  78. },

  79. removeLastCache: function () {

  80. var i, len;

  81. var num = this.removeNum || 5;

  82. //取出键值对

  83. var cacheStr = this.sProxy.getItem(this.keyCache);

  84. var cacheMap = [];

  85. var delMap = [];

  86. //说明本次存储过大

  87. if (!cacheStr) return false;

  88. cacheMap.sort(function (a, b) {

  89. return a.timeout - b.timeout;

  90. });

  91. //删除了哪些数据

  92. delMap = cacheMap.splice(0, num);

  93. for (i = 0, len = delMap.length; i < len; i++) {

  94. this.sProxy.removeItem(delMap[i].key);

  95. }

  96. this.sProxy.setItem(this.keyCache, JSON.stringify(cacheMap));

  97. return true;

  98. },

  99. setKeyCache: function (key, timeout) {

  100. if (!key || !timeout || timeout < new Date().getTime()) return;

  101. var i, len, tmpObj;

  102. //获取当前已经缓存的键值字符串

  103. var oldstr = this.sProxy.getItem(this.keyCache);

  104. var oldMap = [];

  105. //当前key是否已经存在

  106. var flag = false;

  107. var obj = {};

  108. obj.key = key;

  109. obj.timeout = timeout;

  110. if (oldstr) {

  111. oldMap = JSON.parse(oldstr);

  112. if (!_.isArray(oldMap)) oldMap = [];

  113. }

  114. for (i = 0, len = oldMap.length; i < len; i++) {

  115. tmpObj = oldMap[i];

  116. if (tmpObj.key == key) {

  117. oldMap[i] = obj;

  118. flag = true;

  119. break;

  120. }

  121. }

  122. if (!flag) oldMap.push(obj);

  123. //最后将新数组放到缓存中

  124. this.sProxy.setItem(this.keyCache, JSON.stringify(oldMap));

  125. },

  126. buildStorageObj: function (value, indate, timeout, sign) {

  127. var obj = {

  128. value: value,

  129. timeout: timeout,

  130. sign: sign,

  131. indate: indate

  132. };

  133. return obj;

  134. },

  135. get: function (key, sign) {

  136. var result, now = new Date().getTime();

  137. try {

  138. result = this.sProxy.getItem(key);

  139. if (!result) return null;

  140. result = JSON.parse(result);

  141. //数据过期

  142. if (result.timeout < now) return null;

  143. //需要验证签名

  144. if (sign) {

  145. if (sign === result.sign)

  146. return result.value;

  147. return null;

  148. } else {

  149. return result.value;

  150. }

  151. } catch (e) {

  152. console && console.log(e);

  153. }

  154. return null;

  155. },

  156. //获取签名

  157. getSign: function (key) {

  158. var result, sign = null;

  159. try {

  160. result = this.sProxy.getItem(key);

  161. if (result) {

  162. result = JSON.parse(result);

  163. sign = result && result.sign

  164. }

  165. } catch (e) {

  166. console && console.log(e);

  167. }

  168. return sign;

  169. },

  170. remove: function (key) {

  171. return this.sProxy.removeItem(key);

  172. },

  173. clear: function () {

  174. this.sProxy.clear();

  175. }

  176. });

  177. Storage.getInstance = function () {

  178. if (this.instance) {

  179. return this.instance;

  180. } else {

  181. return this.instance = new this();

  182. }

  183. };

  184. return Storage;

  185. });

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

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

  1. define(['AbstractStorage'], function (AbstractStorage) {

  2. var Store = _.inherit({

  3. //默认属性

  4. propertys: function () {

  5. //每个对象一定要具有存储键，并且不能重复

  6. this.key = null;

  7. //默认一条数据的生命周期，S为秒，M为分，D为天

  8. this.lifeTime = '30M';

  9. //默认返回数据

  10. // this.defaultData = null;

  11. //代理对象，localstorage对象

  12. this.sProxy = new AbstractStorage();

  13. },

  14. setOption: function (options) {

  15. _.extend(this, options);

  16. },

  17. assert: function () {

  18. if (this.key === null) {

  19. throw 'not override key property';

  20. }

  21. if (this.sProxy === null) {

  22. throw 'not override sProxy property';

  23. }

  24. },

  25. initialize: function (opts) {

  26. this.propertys();

  27. this.setOption(opts);

  28. this.assert();

  29. },

  30. _getLifeTime: function () {

  31. var timeout = 0;

  32. var str = this.lifeTime;

  33. var unit = str.charAt(str.length - 1);

  34. var num = str.substring(0, str.length - 1);

  35. var Map = {

  36. D: 86400,

  37. H: 3600,

  38. M: 60,

  39. S: 1

  40. };

  41. if (typeof unit == 'string') {

  42. unitunit = unit.toUpperCase();

  43. }

  44. timeout = num;

  45. if (unit) timeout = Map[unit];

  46. //单位为毫秒

  47. return num * timeout * 1000 ;

  48. },

  49. //缓存数据

  50. set: function (value, sign) {

  51. //获取过期时间

  52. var timeout = new Date();

  53. timeout.setTime(timeout.getTime() + this._getLifeTime());

  54. this.sProxy.set(this.key, value, timeout.getTime(), sign);

  55. },

  56. //设置单个属性

  57. setAttr: function (name, value, sign) {

  58. var key, obj;

  59. if (_.isObject(name)) {

  60. for (key in name) {

  61. if (name.hasOwnProperty(key)) this.setAttr(k, name[k], value);

  62. }

  63. return;

  64. }

  65. if (!sign) sign = this.getSign();

  66. //获取当前对象

  67. obj = this.get(sign) || {};

  68. if (!obj) return;

  69. obj[name] = value;

  70. this.set(obj, sign);

  71. },

  72. getSign: function () {

  73. return this.sProxy.getSign(this.key);

  74. },

  75. remove: function () {

  76. this.sProxy.remove(this.key);

  77. },

  78. removeAttr: function (attrName) {

  79. var obj = this.get() || {};

  80. if (obj[attrName]) {

  81. delete obj[attrName];

  82. }

  83. this.set(obj);

  84. },

  85. get: function (sign) {

  86. var result = [], isEmpty = true, a;

  87. var obj = this.sProxy.get(this.key, sign);

  88. var type = typeof obj;

  89. var o = { 'string': true, 'number': true, 'boolean': true };

  90. if (o[type]) return obj;

  91. if (_.isArray(obj)) {

  92. for (var i = 0, len = obj.length; i < len; i++) {

  93. result[i] = obj[i];

  94. }

  95. } else if (_.isObject(obj)) {

  96. result = obj;

  97. }

  98. for (a in result) {

  99. isEmpty = false;

  100. break;

  101. }

  102. return !isEmpty ? result : null;

  103. },

  104. getAttr: function (attrName, tag) {

  105. var obj = this.get(tag);

  106. var attrVal = null;

  107. if (obj) {

  108. attrVal = obj[attrName];

  109. }

  110. return attrVal;

  111. }

  112. });

  113. Store.getInstance = function () {

  114. if (this.instance) {

  115. return this.instance;

  116. } else {

  117. return this.instance = new this();

  118. }

  119. };

  120. return Store;

  121. });

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

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

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

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

感谢各位的阅读，以上就是"如何使用HTML5中Localstorage"的内容了，经过本文的学习后，相信大家对如何使用HTML5中Localstorage这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！

很赞哦！
数据 缓存 对象 信息 内容 时候 存储 城市 日期 问题 代码 剪贴板 时间 剪贴 参数 字符 就是 属性 网站 学习 数据库的安全要保护哪些东西 数据库安全各自的含义是什么 生产安全数据库录入 数据库的安全性及管理 数据库安全策略包含哪些 海淀数据库安全审计系统 建立农村房屋安全信息数据库 易用的数据库客户端支持安全管理 连接数据库失败ssl安全错误 数据库的锁怎样保障安全 计算机软件开发公司有什么要求 软件开发网关 查询一天前的数据库表操作记录 网络安全监测预警信息 三星7250服务器报价 网络安全与技术视频教程 软件开发行业总产值 成都信息网络安全协会会员 asp是商业资源数据库吗 网络安全技术就业形势 晋中游戏软件开发 坚果互联网科技公司 工资建数据库 完成oa服务器的迁移更换工作 助力网络安全保障 苹果验证失败连接服务器失败 数据库和文件双写一致性 区块链平台网络技术 数据库审计怎么开始 c获取服务器ip地址 软件开发网站运营保密协议 搞软件开发压力大吗 网络安全优秀班组 如何创造服务器手机版不需要买 国家网络安全4个坚持 判断服务器文件是否存在 删除dns服务器 一般数据库软件怎么下载安装 中国与美国网络安全 服务器配置与管理科思

相关文章

0