客戶端存儲的探究

今天主要對客戶端的存儲進行探究，客戶端存儲的方法有兩種：

• storage ：不會傳到服務器
• cookie ：會傳到服務器上

cookie是早期的客戶端存儲機制，期初是針對服務器腳本設計使用的。儘管在客戶端提供了很是繁瑣的JavaScript API來操做cookie，可是它們難用至極，並且只適合存儲少許文本數據。任何以cookie形式存儲的數據，不論服務器端是否須要，每一次HTTP請求都會把這些數據傳輸到服務器。cookie目前仍然被客戶端程序員大量使用的一個重要緣由是：全部新舊瀏覽器都支持它。可是，隨着Web Storage 的普及，cookie將會迴歸到最初的形態：做爲一種服務器腳本使用的客戶端存儲機制。
那爲何會出現storage？

1. cookie的存儲量小
2. cookie會把信息發送到服務器端，可是有一些信息或者屬性對後端是沒有用的，還佔用帶寬影響性能

localStorage的用法：

sessionStorage的用法：

存儲有效期
localStorage：永久的，除非手動刪除。
sessionStorage：臨時的，窗口關閉就沒有了。

存儲做用域
localStorage：
1.受文檔源的限制，文檔源就是同一個域下的。文檔源是經過協議、主機名以及端口三者來肯定的，所以下面每一個URL擁有不一樣文檔源：

• http://www.example.com //協議：http；主機名:www.example.com
• https://www.example.com //不一樣協議
• http://static.example.com //不一樣主機名
• http://www.example.com：8080 //不一樣端口

2.也受瀏覽器供應商的限制。若是你使用Firefox訪問站點，那麼下一次用另外一個瀏覽器（好比Chrome）再次訪問的時候，那麼本次沒法獲取上次存儲的數據的

sessionStorage ：不只受文檔源的限制，並且還受窗口的限制。若是同源的文檔渲染在不一樣的瀏覽器標籤中，那麼它們擁有各自的sessionStorage的數據，沒法共享（須要注意的是，現代瀏覽器已經具有了從新打開最近關閉的標籤頁隨後恢復上一次瀏覽的會話功能，所以，這些標籤頁以及與之相關的sessionStorage的有效期可能更加長一些）。

存儲API

1. setItem() 設置屬性和值 getItem() 獲取屬性的值
   
2. removeItem() 把名字傳遞進去能夠刪除對應的值
   
3. clear() 不須要參數，能夠刪除全部存儲的數據
   

cookie
cookie是指web瀏覽器存儲的少許數據，只有4k。cookie最先是設計爲服務器端所用的，從底層看，做爲HTTP協議的一種拓展實現它。cookie數據會自動在web瀏覽器和web服務器之間傳輸的，所以服務端腳本就能夠讀、寫存儲在客戶端的cookie的值。

檢測cookie是否啓用,在絕大數瀏覽器中，能夠用navigator.cookieEnabled這個屬性來檢測，要是true，則當前cooki是啓用的；反之則是禁用的。

JS中的編碼和解碼
因爲cookie的名/值中的值是不容許包含分號、逗號和空白符，所以，在存儲前通常能夠採用js核心的全局函數encodeURlComponent()對值進行編碼。相應的，讀取cookie的時候採用decodeURIComponent()解碼

encodeURlComponent()編碼和decodeURIComponent()解碼

設置cookie的值
document.cookie="name=bobo"
(每一次只能設置一個值，由於瀏覽器會認爲後面的鍵值對是這個cookie的屬性)

得到cookie的值
document.cookie若是要獲取指定的某個屬性的話，要本身去分割，下面是cookie分割函數：

cookie 的存儲週期
cookie的默認的有效期很短暫；它只能持續在web瀏覽器的會話期間，一旦用戶關閉瀏覽器，cookie保存的數據就會丟失。須要注意的是：這與sessionStorage的有效期仍是有區別的：cookie的做用域並非侷限在瀏覽器的單個窗口中，它的有效期和整個瀏覽器進程而不是單個瀏覽器窗口的有效期一致。若是想延長cookie的有效期，能夠經過max-age屬性，但必須告訴瀏覽器cookie的有效期是多長（單位是秒）。一旦設置了有效期，瀏覽器就會將cookie數據存儲在一個文件中，而且知道過了指定的有效期纔會刪除該文件。

1.設置cookie的存儲有效期能夠用max-age，單位 秒
document.cookie = "name=bobo;max-age=1000";
2.expires 當前時間加上保存時間
若是想刪除cookie，能夠經過封裝一個函數，是用過時時間來刪除的，把時間設置比當前時間小就能夠了，瀏覽器會自動刪除。

3. path
有時候你可能但願讓整個網站都能使用cookie的值，而不論是哪一個頁面建立它的。比方說，當用戶在一個頁面表單中輸入了他的郵件地址，你想將它保存下來，爲了下次該用戶回到這個頁面填寫表單，或者在網站的其它頁面的任何地方要求輸入帳單地址的時候，將其做爲默認的郵件地址。要知足這樣的需求，能夠設置cookie路徑（設置cookie的path屬性），這樣一來，來自同一個web服務器的頁面，只要URL是以指定的路徑前綴開始的，均可以共享cookie。例如：http://www.exapple.com/catalo...，而且將路徑設置成「/catlog」，那麼該cookie對於http://www.example.com/catalo...，若是把路徑設置成 「 / 」，那麼該cookie對於任何http://www.example.com這臺web...。
4.domain
cookie的做用域默認是文檔源限制。可是，有的大型網站想要子域之間可以互相共享cookie。好比，order.example.com域下的服務器想要讀取catalog.example.com域下設置的cookie值。這個時候能夠經過設置cookie的domain屬性達到目的。例如：catalog.example.com域下的頁面建立了一個cookie，並將其path屬性設置成「 / 」，其domain屬性設置成「 .example.com 」，那麼該cookie就對因此catalog.example.com、orders.example.com以及任何以example.com域下的任何其餘服務器均可見。

cookie和storage區別