前端存储 - localStorage

发布自 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 store

API：

// 引入
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 ...
});

参考

• http://www.javashuo.com/article/p-qbmjorur-kb.html
• http://www.javashuo.com/article/p-maiuxvgt-hd.html
• http://www.w3school.com.cn/html5/html_5_webstorage.asp
• https://www.npmjs.com/package/store