详解javascript 存储

时间 2019-11-16

标签详解 javascript 存储栏目 JavaScript 繁體版

原文原文链接

javascript用于存储的方式可谓是多种多样，善于应用‘存储’能够大大的提升网站的性能，博主结合平常开发常见需求作一下总结，但愿对你们有用～

1.cookie

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

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

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

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

cookie常见携带参数javascript

属性项	属性项介绍
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。css

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

常见应用：java

使用原生js操做cookie

 1 document.cookie = name + '=' + escape(value);  //设置cookie  
 2 //设置过时时间   
 3 function setCookie(name,value)
 4 {
 5     var Days = 30;
 6     var exp = new Date();
 7     exp.setTime(exp.getTime() + Days*24*60*60*1000);
 8     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
 9 } 
10 //读取cookie  
11 function getCookie(name)
12 {
13     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
14     if(arr=document.cookie.match(reg)){  //使用match匹配，arr[0] 为匹配成功的字符串，好比" test1=2222"，以后为（）中逐个匹配到的值

15       return unescape(arr[2]);
16     }
17     else{
18      return null;
19     }
20 }

 1 //删除cookie
 2 function delCookie(name)
 3 {
 4     var exp = new Date();
 5     exp.setTime(exp.getTime() - 1);
 6     var cval=getCookie(name);
 7     if(cval!=null){
 8       document.cookie= name + "="+cval+";expires="+exp.toGMTString();
 9     }
10 }

2.localstorageajax

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

存储大小： 5m

兼容性： ie8+

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

缺陷： 1. localstorage不被爬虫识别，因此不能用它彻底取代url传參

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

常见应用：

判断localstorage已经存储满了

1 try {
2     localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
3 } catch (e) {
4     //若是存储满了,就所有删掉
5     localStorage.clear();//所有删除
6     localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
7 }

存储满后会抛出异常，只要捕获异常，再删除所有数据，便可。

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

判断localstorage已过时（因为localstorage没有cookie的过时控制，须要本身控制）

 1 //封装过时控制代码
 2 function set(key, value) {
 3     var curTime = new Date().getTime();
 4     try {
 5         localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
 6     } catch (e) {
 7         //若是存储满了,就所有删掉
 8         localStorage.clear();//所有删除
 9         localStorage.setItem(key, JSON.stringify({data: value, time: curTime}));
10     }
11 }
12 function get(key, exp) {
13     var data = localStorage.getItem(key);
14     var dataObj = JSON.parse(data);
15     if (new Date().getTime() - dataObj.time > exp) {
16         localStorage.removeItem(key);//过时就清除key的值
17         console.log('信息已过时');
18     } else {
19         return JSON.stringify(dataObj.data);
20     }
21 }

判断浏览器是否支持localstorage

1 if (window.localStorage) {
2     console.log('This browser supports localStorage');
3 } else {
4     console.log('This browser does NOT support localStorage');
5 }

常见api

1 localStorage.setItem("b", str); //设置b的值
2 var b = localStorage.getItem("b");  //获取b
3 localStorage.clear();//所有删除
4 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 – 在此标题下列出的文件将在首次下载后进行缓存api

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

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

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

1 CACHE MANIFEST
2 # versin 1.0.0      //版本，若修改，则从新拉取
3 CACHE:   
4   /theme.css   //缓存该文件
5   /main.js
6 NETWORK:      //不会被缓存的文件
7   login.jsp
8 FALLBACK:      //回退页面
9   /html/ /offline.html