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)的例子，可以自己试试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将重置。</p>
</body>
</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();
}
网上也有很多封装好的方法
<script type="text/javascript">
//封装过期控制代码
function set(key,value){
var curTime = new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
}
function get(key,exp){
var data = localStorage.getItem(key);
var dataObj = JSON.parse(data);
if (new Date().getTime() - dataObj.time>exp) {
console.log('信息已过期');
//alert("信息已过期")
}else{
//console.log("data="+dataObj.data);
//console.log(JSON.parse(dataObj.data));
var dataObjDatatoJson = JSON.parse(dataObj.data)
return dataObjDatatoJson;
}
}
</script>
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上查看，这里不做过多介绍。
网友评论