详解 JavaScript 存储

518 查看

javascript用于存储的方式可谓是多种多样，善于应用‘存储’可以大大的提高网站的性能，博主结合日常开发常见需求做一下总结，希望对大家有用～

1.cookie

存储大小： 4kb左右，以20个为上限，

清理机制： IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

主要应用：购物车，登录状态

缺陷： 同域内http请求都会带cookie，浪费带宽

cookie常见携带参数

属性项	属性项介绍
name= value	键值对，可以设置要保存的 Key/Value，注意这里的 NAME 不能和其他属性项的名字一样
Expires/ max-age	过期时间，在设置的某个时间点后该 Cookie 就会失效，如 expires=Wednesday, 09-Nov-99 23:12:40 GMT
Domain	生成该 Cookie 的域名，如 domain=”soulteary.com”
Path	该 Cookie 是在当前的哪个路径下生成的，如 path=/admin/
Secure	如果设置了这个属性，那么只会在 SSH 连接时才会回传该 Cookie
http	http-only true：cookie只能在服务器端读取和修改，比较安全

cookie安全

如果 Cookie 具有 HttpOnly 属性且不能通过客户端脚本访问，则为 true；否则为 false。默认为 false。

ie 6 ＋都支持属性 HttpOnly，该属性有助于缓解跨站点脚本威胁。

常见应用：

使用原生js操作cookie

document.cookie = name + '=' + escape(value); //设置cookie

//设置过期时间

function setCookie(name,value)

{

var Days = 30;

var exp = new Date();

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

//读取cookie

function getCookie(name)

{

var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配

if(arr=document.cookie.match(reg)){ //使用match匹配，arr[0] 为匹配成功的字符串，比如" test1=2222"，之后为（）中逐个匹配到的值

return unescape(arr[2]);

}

else{

return null;

}

//删除cookie

function delCookie(name)

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval=getCookie(name);

if(cval!=null){

document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

2.localstorage

存储内容： 只要是能序列化成字符串的内容都可以存储，利用JSON.stringify()；

存储大小： 5m

兼容性： ie8+

主要应用：常用于ajax请求缓存

缺陷： 1. localstorage不被爬虫识别，所以不能用它完全取代url传參

2. 不能跨域共享，所以不要用以存储业务关键信息，更加不要存储安全信息，（cookie可以通过window.name解决，但是localstorage不能）

常见应用：

判断localstorage已经存储满了

try {

localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));

} catch (e) {

//如果存储满了,就全部删掉

localStorage.clear();//全部删除

localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));

}

存储满后会抛出异常，只要捕获异常，再删除全部数据，即可。

JSON.stringify(localStorage).length 可以查看当前使用了的大小，用5M减一下可以得出粗略的剩余大小（但是很不精确）

判断localstorage已过期（由于localstorage没有cookie的过期控制，需要自己控制）

//封装过期控制代码

function set(key, value) {

var curTime = new Date().getTime();

try {

localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));

} catch (e) {

//如果存储满了,就全部删掉

localStorage.clear();//全部删除

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) {

localStorage.removeItem(key);//过期就清除key的值

console.log('信息已过期');

} else {

return JSON.stringify(dataObj.data);

}

判断浏览器是否支持localstorage

if (window.localStorage) {

console.log('This browser supports localStorage');

} else {

console.log('This browser does NOT support localStorage');

}

常见api

localStorage.setItem("b", str); //设置b的值

var b = localStorage.getItem("b"); //获取b

localStorage.clear();//全部删除

localStorage.removeItem(key);//清除key的值

3.sessionstorage

sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。其他与localstorage一样。

4.离线缓存（application cache）

兼容性： ie 9 ＋

主要应用：常用于静态资源缓存

存储大小：5m

缺陷：由于原理上，application cache是把manifest上的资源一起下载下来，所以manifest里的内容不宜过多，数据量不宜过大；由于manifest的解析通常以页面刷新为触发点，且更新的缓存不会立即被使用，所以缓存的资源应以静态资源、更新频率比较低的资源为主。另外要做好对manifest文件的管理，由于清单内文件不可访问或manifest更新不及时造成的一些问题。

使用方法：

1.navigator.online 检测是否在线

2.浏览器向服务端发出请求， html标签中这样写: <html manifest=”demo.appcache” >;

这样浏览器就会向请求其它资源一样向服务器请求这个名为 test.manifest文件了。

在服务器端添加 mime-type text/cache-manifest

3.配置test.manifest 文件

①CACHE MANIFEST – 在此标题下列出的文件将在首次下载后进行缓存

②NETWORK – 在此标题下列出的文件需要与服务器的连接，且不会被缓存

③FALLBACK – 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

更新：只有server端的manifest文件改变，浏览器才会重新拉取离线数据，需要页面再次刷新（2次刷新才能获取新资源），更新是全局性的，无法单独更新某个文件。

CACHE MANIFEST

# versin 1.0.0 //版本，若修改，则重新拉取

CACHE:

/theme.css //缓存该文件

/main.js

NETWORK: //不会被缓存的文件

FALLBACK: //回退页面

/html/ /offline.html