前端 緩存

1、瀏覽器機制 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的屬性

一、expires屬性
指定了coolie的生存期，默認狀況下coolie是暫時存在的，他們存儲的值只在瀏覽器會話期間存在，當用戶推出瀏覽器後這些值也會丟失，若是想讓cookie存在一段時間，就要爲expires屬性設置爲將來的一個過時日期。如今已經被max-age屬性所取代，max-age用秒來設置cookie的生存期。
二、path屬性
它指定與cookie關聯在一塊兒的網頁。在默認的狀況下cookie會與建立它的網頁，該網頁處於同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯。
三、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。
四、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)

 

 

2、 內存存儲  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內的數據共享

 

 

 

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

一、input hidden, 隱藏域

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

二、自定義標籤屬性