詳解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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。