JS本地存储

image.png

WEB应用的快速发展，那么前端对于本地存储一些数据也成为一种重要的需求，例如保存账户登录的用户名、密码等，既提高了用户体验，也省去了跟后端交互所需的步骤，还不影响网站的性能。
因此呢，推出了cookie、userData、flash、sessionStorage、localStorage、应用缓存等等方案，本文涉及到的内容仅cookie、sessionStorage、localStorage，不足之处，望见谅。

1.cookie

image.png

cookie是一种会话跟踪技术，用于在进行网页访问的时候，存储页面中的客户端的用户信息。

cookie在使用中还有几个注意点：
001 使用cookie来进行数据存储的大小有限制，4KB
002 每个网页中存储cookie的个数（最多50）和每个网站中存储cookie的个数都有限制（200）
003 各个不同的浏览器对cookie的数量也不相同
IE6.0：每个域为20个，大小为4095个字节
IE7.0/8.0：每个域为50个 ，大小为4095个字节
Opera：每个域为30个 ，4096个字节
Firefox：每个域为50个 ，大小为4097个字节
Safari：没有个数限制，大小为4097个字节
Chrome：每个域为53个，大小为4097个字节
004 cookie数据的过期时间
a）默认情况下，cookie存储的内容是一次性的，它的有效期间是当前会话（需要把整个浏览器都关闭会话就结束）
b）设置过期时间：通过expires=time;的格式来进行指定, 设置了之后只要没有超过过期时间，那么数据将一直都在
005 cookie是不可以跨浏览器的(例如在IE中保存的cookie, 不可以在火狐中使用)
006 cookie是不可以跨域的(跨域名)

因此，cookie对于目前的技术发展来说，已经显得力不从心了。于是H5推出了sessionStorage和localStorage。

2.sessionStorage

sessionStorage也是一种会话级存储，存储会话中的信息，这个性质跟cookie差不多，不过存储的容量有所提升，容量为2MB，可以存储的数据多了400多倍，是不是很高兴啊。然并卵，还是不能永久存储，当你关掉浏览器的时候sessionStorage还是会把数据清除掉。

与cookie不同的是，因为sessionStorage是H5才推出的，所以在使用时要考虑兼容问题

if(typeof(Storage)!=="undefined")
{
  localStorage.sitename="支持web存储";
  document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}
else
{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}

sessionStorage的用法也比较简单：

保存数据：sessionStorage.setItem(key,value);

读取数据：sessionStorage.getItem(key);

删除单个数据：sessionStorage.removeItem(key);

删除所有数据：sessionStorage.clear();

得到某个索引的sessionStorage.key(index);

再给出一个比较简单菜鸟教程(http://www.runoob.com/html/html5-webstorage.html)的例子，可以自己试试

 
 



点我！

点击该按钮查看计数器的增加。
关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。

3.localStorage

localStorage是比cookie和sessionStorage都要好的本地存储方案。

001对象存储的数据没有时间限制，不会自动清除所存储的数据，必须手动清除或设置过期时间；
002存储量约为5MB（每种浏览器中的存储量有差异）
003可以跨浏览器

这些特点可以为我们解决了不少本地存储时遇到的问题。同时需要注意的是，因为是H5的时候推出的，所以使用前也还是要检测兼容性，方法跟sessionStorage一样（这里就不贴出来了），并且呢，localStorage的用法也跟sessionStorage类似

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

localStorage设置过期时间，比较简单的方法

if (+new Date() > +new Date(2017, 12, 12)) {
    localStorage.removeItem("a");    //清除a的值
    // or localStorage.clear();
}

网上也有很多封装好的方法

4.store.js(https://github.com/marcuswestin/store.js)

因为cookie、sessionStorage、localStorage都有一定的局限性，所以浏览器厂商推出了自己的本地存储，如：userData是IE浏览器专属、globalStorage适用于Firefox 2+的浏览器、google gear是谷歌开发出的一种本地存储技术等。那么，在开发中就要做浏览器判断，以对应使用不同的本地存储，这样非常的麻烦。于是，store.js诞生了。

image.png

store.js是2010年发布的一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash。store.js 会根据浏览器自动选择使用 localStorage、globalStorage 或者 userData 来实现本地存储功能。

API给出的用法

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
    console.log(key, '==', value)
})

看着感觉也挺简单的* ~ *。详细了解的可以到github上查看，这里不做过多介绍。

完