localstorage的使用(缓存)
在微信公众号看到了一篇文章,截取一些重点做笔记,篇尾附上原文出处。
1. localStorage出现的需求和目的
localStorage出现是为了弥补cookie(4k)容量过小的问题,localStorage在大部分电脑是5m。与localStorage同时出现的还有sessionStorage,sessionStorage是会话级,页面关闭,自动清除,localStorage需要清除行为才能清除。
2. 操作方法
新增(替换),获取,单个移除,全部移除:
1. window.localStorage.setItem(key,value)
2. window.localStorage.getItem(key)
3. window.localStorage.removeItem(key)
4. window.localStorage.clear(key)
window是可以省略的,且需要注意的是:简单数据类型和复杂数据类型都可以存储在localStorage当中,但是对于引用数据类型,需要进行序列化和反序列化,说人话就是用JSON.stringify()转换为json字符串,同理获取的时候可以恢复为原来的数据
3. 注意的地方
1. 当存量接近最大值时,getItem的速度大大降低。
2. setItem时,如果存量加上添加量大于上限,那么就会出错,需要捕捉错误:
try {
localStorage.setItem(key, value);
} catch(e) {
if (isQuotaExceeded(e)) {
// Storage full, maybe notify user or do some clean-up
}
}
function isQuotaExceeded(e) {
var quotaExceeded = false;
if (e) {
if (e.code) {
switch (e.code) {
case 22:
quotaExceeded = true;
break;
case 1014:
// Firefox
if (e.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
quotaExceeded = true;
}
break;
}
} else if (e.number === -2147024882) {
// Internet Explorer 8
quotaExceeded = true;
}
}
return quotaExceeded;
}
4. 加载和缓存静态资源
后边实在是太长,直接扔原文吧