主页 浏览器localStorage的应用 正文

浏览器localStorage的应用

作者:bcm   更新时间:2019年5月4日 14:22   


转载注明地址:http://www.bianbingdang.com/article_detail/168.html # localStorage在哪查看 localStorage和cookie一样,在开发者选项的Application可找到,以Chrome为例。 ![变饼档博客LocalStorage](/media/editor/TIM截图20190504134459_20190504134511454099.png "变饼档博客LocalStorage") # localStorage简介 - 遵循浏览器同源策略 - 一次保存,在同一个网站任意页面访问 - 存储在 localStorage 的数据可以长期保留,即使页面关闭,除非清除浏览器缓存以及cookies - localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型) # 为什么使用它 在博客开发过程中使用了大量的ajax请求,图片资源,其它资源的引用,许多东西并不需要每次向后台查询。例如博客的热门标签、热门文章、随机文章的展示,每次去后台请求是一笔不小的开销。那么在初次访问的时候,就可以将它放在localStorage当中,然后设置一个过期的时间即可。 # 语法简介 下面的代码片段访问了当前域名下的本地 Storage。 通过 Storage.setItem() 增加了一个数据项目。 `localStorage.setItem('myCat', 'Tom');` 该语法用于读取 localStorage 项,如下: `let cat = localStorage.getItem('myCat');` 该语法用于移除 localStorage 项,如下: `localStorage.removeItem('myCat');` 该语法用于移除所有的 localStorage 项,如下: `localStorage.clear();` # JSON以及数据过期的处理 需要注意的是,localStorage并不支持JSON格式数据的解析,那么只能用`JSON.stringify`以及`JSON.parse`,分别对JSON进行处理。 同时也不支持数据的过期,这是一件可怕的事情,如果用户不清理浏览器,那么它永远也看不到最新的数据了。 所以博客开发过程中,应该对以上两种情况做出处理 例如,变饼档博客使用过程中使用了如下代码,代替了原生的set、get方法: ```javascript function BbdLocalsetItem(key, value, exp) { if (!exp) { exp = 1000 * 60 * 60 * 60 } var currentTime = new Date().getTime(); localStorage.setItem(key, JSON.stringify({data: value, time: currentTime, exp})) } function BbdLocalgetItem(key) { var data = localStorage.getItem(key); var dataObj = JSON.parse(data); if (!dataObj) { return "" } var currentTime = new Date().getTime(); if (currentTime - dataObj.time > dataObj.exp) { return "" } else { return dataObj.data } } ```


目录

关于站点

变饼档 变饼档 头条号 微信号

@变饼档

网站备案/许可证号 陕ICP备17000772号-1

联系邮箱 942242856@qq.com


@技术支持

前端 layui,jquery,vue

后端 django,django-simpleui