前端存储-localStorage
发布⾃，欢迎⼤家转载，但是要注意注明出处
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'
});sessionstorage和localstorage
// 获取数据
let obj = ('user');
/
/ 删除数据
// 删除所有数据
store.clearAll();
// 遍历键值对
store.each((value, key) => {
// do something ...
});
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。