宣布自
Kindem的博客，迎接人人转载，然则要注意说明出处
localStorage 引见
在HTML5中，引入了两个新的前端存储特征：
- localStorage
- sessionStorage
这二者异常相似，都是用来在前端保留肯定量的数据，称为前端存储，然则这二者依然存在肯定区分：
生命周期：
- localStorage: localStorage的生命周期是永远的，纵然封闭页面、浏览器，个中的内容也不会消逝，除非手动删除localStorage中的内容
- sessionStorage: sessionStorage的生命周期是一次浏览器窗口会话，浏览器窗口指的是一组同源页面(来自于一个域名)的浏览器页面鸠合，当这些窗口悉数封闭以后，sessionStorage的内容将不会存在
存储大小：
- 二者都为5MB/域名
存储位置：
- 二者都保留在客户端，不与服务器举行交互
存储内容范例：
- 二者都只能存储字符串，然则能够经由过程范例转换来存储各种数据
猎取体式格局：
- localStorage: window.localStorage
- sessionStorage: sessionStorage
可见localStorage合适在前端存储长时间运用的数据， 而sessionStorage合适存储短时间运用、一次性的数据
别的这里要提一句，sessionStorage并非session：
- sessionStorage中的‘session’是指浏览器窗口会话，而后者的‘session’指的是服务器会话
- 前者是前端存储，与服务器无关，而后者的完成依赖于服务器
这里只引见越发经常使用的localStorage的运用，而sessionStorage的运用实在也相似
localStorage的运用
localStorage作为一个在HTML5中引入的特征，在IE6/7等一些低版本的浏览器中是没法被支撑的，所以发起在运用localStorage之前先搜检浏览器支撑状况：
if (!window.localStorage) {
// 当浏览器不支撑 localStorage ...
} else {
// 浏览器支撑 localStorage ...
}localStorage的运用也很简朴，在localStorage中，数据都是以键值对的情势存在，能够运用json对象的情势直接对localStorage中的键值对举行操纵：
// 设置数据
localStorage.a = 'hello';
localStorage.b = 'zero';
// 读取数据
console.log(localStorage.a);
console.log(localStorage.b);就那末简朴
然则这里要注意一点，存储在localStorage中的数据肯定是以字符串情势存在的，所以当你存入/读取其他情势的数据时，须要举行范例转换才行：
// 存入 json 数据
localStorage.jsonTest = JSON.stringify({
a: 'hello',
b: 'zero'
});
// 读取 json 数据
console.log(JSON.parse(localStorage.jsonTest).a);
console.log(JSON.parse(localStorage.jsonTest).b);运用js库来操纵localStorage
有许多js库供应了一系列简化localStorage而且供应跨平台操纵的功用，运用它们能够越发轻易地运用localStorage，这里引见一个js库——store.js
store.js 的一大长处就是他将为你自动举行范例转换，相当于你能够直接在 localStorage 中贮存诸如 json 对象等范例的数据，这些对你来说是通明的
装置：
npm install storeAPI：
// 引入
let store = require('store');
// 设置数据
store.set('user', {
name: 'Kindem'
});
// 猎取数据
let obj = store.get('user');
// 删除数据
store.remove('user');
// 删除一切数据
store.clearAll();
// 遍历键值对
store.each((value, key) => {
// do something ...
});