瀏覽器對象存儲數據詳解

　　前言　　

　　　　隨著需求的發展，瀏覽器的功能正變的越來越強大，在本地存儲數據可以極大的方便人們進行各種操作，如localStroage/sessionStroage等，下面我就記錄在項目中碰到然后進行處理的方式，在以后如果有碰到相關或者有更深的理解，會進行補充。

　　Cookie

　　　　Cookie技術是客戶端的解決方案，Cookie就是由服務器發給客戶端的特殊信息，而這些信息以文本文件的方式存放在客戶端，然后客戶端每次向服務器發送請求的時候都會帶上這些特殊的信息。因為HTTP是無狀態的協議，因此當你下次訪問時，為提高用戶體驗如不需要重新登陸，記錄你的購物方式等，Cookie就會記錄你的狀態以幫助實現這些功能。

　　　　注意： cookie存在不可跨域名性。

　　　　document.cookie 獲得一個字符串，該字符串包含所有的Cookie，每條cookie以分號分隔(即,?key=value?鍵值對)。更詳細的我們可以參考MDN介紹

　　　　封裝的增刪改查Cookie方法:

/* * 設置cookie / 如果鍵一樣則進行覆蓋（改） * @param name 鍵 * @param value 值 * @param delay 有效期(單位小時，缺省6小時) */ function setCookie(name, value, delay) {let exp = new Date();exp.setTime(exp.getTime() + ( !!delay ? delay : 6 ) * 3600 * 1000 ) ;document.cookie = name + "=" + escape(value) + "; expires=" + exp.toGMTString(); }/* * 獲取cookie * @param name * @return {*} */ function getCookie(name) {let ret = new RegExp(("(^| )"+name+"=([^;]*)(;|$)"));if(arr=document.cookie.match(reg))return unescape(arr[2]);elsereturn null; }/* * 刪除cookie * @param name */function delCookie(name) {let exp = new Date();exp.setTime(exp.getTime() - 3); //設置為超時let cval = getCookie(name); //獲取值if ( cval != null ) {document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();} }

?　　---------20180324 補充 ----------------

　　　　來個概念 :同源策略，它是由Netscape提出的一個著名的安全策略。同源是指，域名，協議，端口相同。

　　　　先說明下我碰到的情況，項目有兩個端，一個醫生端，一個病人端，二者的域名一樣，而端口不一樣。在登錄的時候保存登錄信息到cookie中（使用如上setCookie方法，目的是利用時效性），cookie的鍵名稱是一樣的，導致的問題是同一個瀏覽器同時登錄兩個端，后面登錄的cookie會把前面登錄的cookie覆蓋了，然后導致數據請求接口出錯了。當時我是凌亂的，因為cookie是遵循同源策略的，怎么會不同端口的cookie會被覆蓋或者獲取到呢？ 經過我的排查，我覺的原因①我使用的是document.cookie，參考MDN我發現 ;domain=domain 部分有這么一句話:?如果沒有定義，默認為當前文檔位置的路徑的域名部分。因此兩個端的cookie是同一個域名，具體我們也可以通過“開發者工具”->"Application" -> "Cookie" ，發現Domain 字段都是127.0.0.1(在改了cookie鍵名稱的情況下，有兩個，否則覆蓋)。②受到阮一峰老師文章的啟發，我們可以通過設置document.cookie=xx 可以實現二級域名不同來實現共享Cookie ，我感覺原理是一樣的。因此當我把cookie的鍵名稱改為不同時，問題就解決了。?

　　　　So最后結論是 cookie是遵循同源策略的，只是我們主動在瀏覽器端進行設置時使用document.cookie是會導致域名相同不同端口cookie是可以共享的。查看資料室發現阮一峰老師的一篇好文章???瀏覽器同源政策及其規避方法?。

?

　　localStorage和sessionStorage

　　　　在HTML 5 最開始時，本地存儲有兩種方式：一種是web Storage，另一種是web SQL。由于web SQL的實現是基于SQLite，它更傾向于DataBase方向，且W3C官方在2011年11月宣布不在維護web SQL規范，故其API接口目前已經不屬于HTML 5的范疇。因此，目前我們常講的HTML 5本地存儲，多指的是web Storage。二者的存放數據大小為一般為5MB

　　　　二者的區別在于sessionStorage僅在當前會話有效，關閉頁面或瀏覽器后清除，而localStorage永久有效，即使關閉了瀏覽器依然存在。

　　　　作用域不同:? 不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬于相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。需要注意的是，頁面及標簽頁僅指頂級窗口，如果一個標簽頁包含多個iframe標簽且他們屬于同源頁面，那么他們之間是可以共享sessionStorage的。

　　　　封裝方法如下;
　　　　

const SALT = '__admin__'export default {local: {get(key) {let strValue = localStorage.getItem(SALT + key)return JSON.parse(strValue)},set(key, jsonValue) {var strValue = JSON.stringify(jsonValue)localStorage.setItem(SALT + key, strValue)},remove(key) {localStorage.removeItem(SALT + key)},removeAll() {localStorage.clear()}},session: {get(key) {let strValue = sessionStorage.getItem(SALT + key)return JSON.parse(strValue)},set(key, jsonValue) {var strValue = JSON.stringify(jsonValue)sessionStorage.setItem(SALT + key, strValue)},remove(key) {sessionStorage.removeItem(SALT + key)},removeAll() {sessionStorage.clear()}}}

　　瀏覽器緩存

　　　　瀏覽器緩存的優點: （1）減少網絡寬帶消耗 （2）降低服務器壓力（3）減少網絡延遲，加快頁面打開速度。

　　　　1. 瀏覽器緩存的類別

　　　　　　強緩存：用戶發送的請求，直接從客戶端緩存中獲取，不發送請求到服務器，不與服務器發生交互行為。

　　　　　　協商緩存:?用戶發送的請求，發送到服務器后，由服務器判定是否從緩存中獲取資源。?

　　　　　　緩存的真面目: 我們以chrome為例，?輸入chrome://cache，里面有很多的文件路徑，可以點擊進去，可以看到緩存的內容和表現形式。

　　　　2.瀏覽器緩存涉及到的HTTP信息

　　　　　　如expires/Cache-Control/Last-modified/Etag等字段，參考“參考文獻”。有寫的非常詳細的內容

　　　　3.用戶行為導致的瀏覽器緩存行為

　　　　

　　　　4.原理

　　　　　　參考下文獻，講解的非常詳細。

　　　　5.補充

　　　　　　jQuery中的$.ajax方法中，有cache參數/ifModified參數與緩存有關。

　　　　　　cache參數:? 默認情況下，請求總是會被發出去，但瀏覽器有可能從它的緩存中調取數據。要禁止使用緩存結果，可以設置cache為false。

　　　　　　　　　　　　描述: （默認true, dataType為script和jsonp時默認為false）? jQuery 1.2新功能，設置為false將不緩存此頁面。

　　　　　　ifModified參數: (默認false) 僅在服務器數據改變時獲取新數據。使用HTTP包 Last-Modified頭信息判斷。在jQuery 1.4中，它也會檢查服務器指定的"etag"來確定數據沒有被修改過。

　　　　　　更詳細內容，可參考jQuery API 中文文檔。

　　參考文獻

　　　　https://www.cnblogs.com/shixiaomiao1122/p/7591556.html? 徹底理解瀏覽器緩存機制

　　　　https://segmentfault.com/a/1190000011212929#articleHeader5? 瀏覽器緩存-前端隨筆

　　　　https://www.cnblogs.com/slly/p/6732749.html? 瀏覽器緩存機制詳解

?

轉載于:https://www.cnblogs.com/cleaverlove/p/8531050.html

總結

以上是生活随笔為你收集整理的浏览器对象存储数据详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。