一、瀏覽器機制 cookie,sessionstorage,localstorage

　　1.1共同點：都是保存在瀏覽器端，且同源的。

　　1.2區別：

　　　　a)是否發生給服務器

cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞；cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶 ?cookie，所以cookie只適合保存很小的數據，如會話標識。

而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。

　　　　b)數據有效期不同，

sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；

localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；

cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

　　　　c)作用域不同，

sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

　　　　d)掛載的dom對象不同

：cookie在document對象下，sessionstorage和localstorage在window對象下

　　1.3使用

?cookie的屬性

1、expires屬性
指定了coolie的生存期，默認情況下coolie是暫時存在的，他們存儲的值只在瀏覽器會話期間存在，當用戶推出瀏覽器后這些值也會丟失，如果想讓cookie存在一段時間，就要為expires屬性設置為未來的一個過期日期。現在已經被max-age屬性所取代，max-age用秒來設置cookie的生存期。
2、path屬性
它指定與cookie關聯在一起的網頁。在默認的情況下cookie會與創建它的網頁，該網頁處于同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯。
3、domain屬性
domain屬性可以使多個web服務器共享cookie。domain屬性的默認值是創建cookie的網頁所在服務器的主機名。不能將一個cookie的域設置成服務器所在的域之外的域。
例如讓位于order.example.com的服務器能夠讀取catalog.example.com設置的cookie值。如果catalog.example.com的頁面創建的cookie把自己的path屬性設置為“/”，把domain屬性設置成“.example.com”，那么所有位于catalog.example.com的網頁和所有位于orlders.example.com的網頁，以及位于example.com域的其他服務器上的網頁都可以訪問這個coolie。
4、secure屬性

1 console.log(document.cookie); 2 var func={ 3 getCookie:function(name){ 4 var cookieValue = null; 5 if (document.cookie && document.cookie != '') { 6 var cookies = document.cookie.split(';'); 7 for (var i = 0; i < cookies.length; i++) { 8 // var cookie = jQuery.trim(cookies[i]); 9 var cookie = cookies[i].replace(/^\s*|\s*$/g,''); 10 // Does this cookie string begin with the name we want? 11 if (cookie.substring(0, name.length + 1) == (name + '=')) { 12 cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 13 break; 14 } 15 } 16 } 17 return cookieValue; 18 }, 19 setCookie:function(name,value){ 20 var Days = 30; 21 var exp = new Date(); 22 exp.setTime(exp.getTime() + Days*24*60*60*1000); 23 document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 24 }, 25 delCookie:function(name){ 26 var exp = new Date(); 27 exp.setTime(exp.getTime() - 1); 28 var cval=func.getCookie(name); 29 if(cval!=null) 30 document.cookie= name + "="+cval+";expires="+exp.toGMTString(); 31 } 32 33 } 34 35 console.log(func.setCookie('name','v_kninkuang')) 36 console.log(func.getCookie('name')) 37 console.log(func.delCookie('name'))

?

?

sessionStorage和localStorage用法一致， 可以使用方法setItem(),getItem()和屬性直接賦值,取值的形式進行存取操作，removeItem()和clear()實現delete和清空操作

1 sessionStorage.setItem('key', 'value'); 2 sessionStorage.key1='value1' 3 4 // Get saved data from sessionStorage 獲取值的方式 5 var key=sessionStorage.getItem('key'); 6 var key1=sessionStorage.key1; 7 console.log(sessionStorage,key,key1) 8 // Remove saved data from sessionStorage 9 sessionStorage.removeItem('key'); 10 11 // Remove all saved data from sessionStorage 12 sessionStorage.clear(); 13 console.log(sessionStorage)

?

?

二、 內存存儲 ?jQuery.data() ,angular Server等

編程語言中申明的變量都是存儲在內存中的，當我們對變量進行過賦值且變量依然存在(瀏覽器刷新或關閉變量丟失)，就可以對之前的數據進行操作。

jQuery.data()在元素上存放或讀取數據,返回jQuery對象。
當參數只有一個key的時候，為讀取該jQuery對象對應DOM中存儲的key對應的值，值得注意的是，如果瀏覽器支持HTML5，同樣可以讀取該DOM中使用 data-[key] = [value] 所存儲的值。

1 <div class="div"></div> 2 <div class="div1"></div> 3 <p data-say="world"></p> 4 <script> 5 $(".div").data("say", "hello"); 6 $(".div1").data("say", "hello1"); 7 console.log($("div").data('say')) //獲取第一個 dom的data hello 8 $("div").removeData("blah"); //移除say 9 console.log($('p').data('say')) //world 10 </script>

?

?注冊一個module，下面封裝一個服務，通過依賴注入 在controller和指令中使用，service內的數據共享

?

?

?

三、Dom存儲 ?隱藏域，屬性，HTML5 data-* 自定義屬性 ?等

1、input hidden, 隱藏域

隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用;

2、自定義標簽屬性

?

?

?

轉載于:https://www.cnblogs.com/blog-index/p/6763254.html

總結

以上是生活随笔為你收集整理的前端 缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

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