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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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; } } |
|
1 2 3 4 5 6 7 8 9 10 |
//刪除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已經儲存滿了
|
1 2 3 4 5 6 7 |
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的過期控制，需要自己控制）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//封裝過期控制程式碼 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
|
1 2 3 4 5 |
if (window.localStorage) { console.log('This browser supports localStorage'); } else { console.log('This browser does NOT support localStorage'); } |
- 常見api
|
1 2 3 4 |
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次重新整理才能獲取新資源），更新是全域性性的，無法單獨更新某個檔案。
|
1 2 3 4 5 6 7 8 9 |
CACHE MANIFEST # versin 1.0.0 //版本，若修改，則重新拉取 CACHE: /theme.css //快取該檔案 /main.js NETWORK: //不會被快取的檔案 login.jsp FALLBACK: //回退頁面 /html/ /offline.html |
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
