前端的本地存儲不可不知了

cookie

1. 做用：

• cookie是純文本，沒有可執行代碼。存儲數據，當用戶訪問了某個網站（網頁）的時候，咱們就能夠經過cookie來向訪問者電腦上存儲數據，或者某些網站爲了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據（一般通過加密）。

2. 特徵：

• 不一樣的瀏覽器存放的cookie位置不同，也是不能通用的。cookie的存儲是以域名形式進行區分的，不一樣的域下存儲的cookie是獨立的。咱們能夠設置cookie生效的域（當前設置cookie所在域的子域），也就是說，咱們可以操做的cookie是當前域以及當前域下的全部子域一個域名下存放的cookie的個數是有限制的，不一樣的瀏覽器存放的個數不同,通常爲20個。每一個cookie存放的內容大小也是有限制的，不一樣的瀏覽器存放大小不同，通常爲4KB。cookie也能夠設置過時的時間，默認是會話結束的時候，當時間到期自動銷燬

3. cookie值既能夠設置，也能夠讀取：

• 1.客戶端設置
• document.cookie ='名字=值';document.cookie ='username=cfangxu;domain=baike.baidu.com'
• 2. 服務器端設置
• 無論你是請求一個資源文件（如 html/js/css/圖片），仍是發送一個ajax請求，服務端都會返回response。而response header中有一項叫set-cookie，是服務端專門用來設置cookie的。
• 3. 讀取咱們經過document.cookie來獲取當前網站下的cookie的時候，獲得的字符串形式的值，它包含了當前網站下全部的cookie（爲避免跨域腳本(xss)攻擊，這個方法只能獲取非 HttpOnly 類型的cookie）。它會把全部的cookie經過一個分號+空格的形式串聯起來，例如username=chenfangxu; job=coding修改 cookie要想修改一個cookie，只須要從新賦值就行，舊的值會被新的值覆蓋。

4. cookie的屬性：

• 通常設置天數：new Date().setDate( oDate.getDate() + 5 ); 比當前時間多5天。

localStorage（本地存儲）

1. 特色：

• HTML5新方法，不過IE8及以上瀏覽器都兼容。
• 生命週期：持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。
• 存儲的信息在同一域中是共享的。
• 當本頁操做（新增、修改、刪除）了localStorage的時候，本頁面不會觸發storage事件,可是別的頁面會觸發storage事件。

2. 大小：

• 通常是5M（跟瀏覽器廠商有關係）。在非IE下的瀏覽中能夠本地打開。IE瀏覽器要在服務器中打開。

3. 設置：

• localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡localStorage受同源策略的限制設置localStorage.setItem('username','cfangxu');

4. 獲取：

• localStorage.getItem('username') 也能夠獲取鍵名 localStorage.key(0)

5. 刪除：

• 獲取第一個鍵名刪除localStorage.removeItem('username')
• 也能夠一次性清除全部存儲localStorage.clear()

sessionStorage

1. 特色：

• 與localStorage相似，也是本地存儲，是會話本地存儲。用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬，或者在新窗口打開同源的另外一個頁面，sessionStorage也是沒有的。

cookie、localStorage、sessionStorage的區別

1. 相同：
2. 在本地（瀏覽器端）存儲數據。
3. 不一樣：
4. localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。
   
5. sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標籤頁）下。
   
6. localStorage是永久存儲，除非手動刪除。sessionStorage當會話結束（當前頁面關閉的時候，自動銷燬）cookie的數據會在每一次發送http請求的時候，同時發送給服務器,而localStorage、sessionStorage不會。