变饼档是一款由Django + vue.js + layui开发的博客，具体源码托放在gitee上。开发的初衷源于python学习者的诉求，可以将源码下载下来进行学习。官网上有pycharm部署的文档，也可以在PC端访问在线的dome。感兴趣的朋友也可部署在服务器上，用于个人日常的记录

转载注明地址：http://www.bianbingdang.com/article_detail/168.html

localStorage和cookie一样，在开发者选项的Application可找到，以Chrome为例。

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方法：

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