javascript之cookie, localstorage, sessionstorge

cookie

因爲http是無狀態的協議，一旦客戶端和服務器的數據交換完畢，就會斷開鏈接，再次請求，會從新鏈接，服務器單從網絡鏈接上是沒有辦法知道用戶身份的。cookie就是爲了解決此問題而產生的，每次新的用戶請求時，便給用戶頒發一個獨一無二的身份證，下次訪問，必須帶上身份證，這樣服務器就會知道是哪一個用戶進行了訪問，針對不一樣用戶，作出不一樣的響應 cookie是一個很小的純文本文件（最多爲4K），是瀏覽器儲存在用戶的機器上的。儲存一些服務器須要的信息，每次請求站點，會發送相應的cookie，這些cookie能夠用來辨別用戶身份信息等做用。

cookie的屬性字段

props	intro
name	cookie的名稱
value	cookie的值
domain	能夠訪問cookie的域名
path	能夠訪問此cookie的頁面路徑
expires/Max-Age	cookie有效的時間
Size	cookie的大小
httpOnly	js可否讀取到cookie信息
secure	是否只能經過https來傳遞此條cookie

cookie是以純文本的方式存儲，即cookie的數據類型爲String類型

document.cookie = 'name=userInfo';  // 設置cookie的name屬性
document.cookie = 'username=Jack';  // 在cookie中存儲了username信息
console.log(document.cookie);  // name=userInfo; username=Jack
複製代碼

document.cookie = 'name=userInfo';  // 設置cookie的name屬性
document.cookie = 'username=Amy';  // 在cookie中存儲了username信息
console.log(document.cookie);  // name=userInfo; username=Amy
複製代碼

經過上面的實例能夠知道，給cookie賦值時是不會覆蓋cookie的原有的值，當等號前的屬性名相同時，纔會將原來相同屬性名的值覆蓋爲後來設置的值。注意，cookie的兩個字段之間是經過一個分號和空格分隔，而不是隻有一個分號

當要給cookie設置非自定義的屬性字段時，須要經過字符串追加的方式

例如

let expireDate = new Date();
document.cookie += ";expires=" + expireDate.toString();
複製代碼

注意：";expires="中的分號必須有，若是字段前不加分號則會認爲這是一個自定義字段

domain

非頂級域名，如二級域名或者三級域名，設置的cookie的domain只能爲頂級域名或者二級域名或者三級域名自己，不能設置其餘二級域名的cookie，不然cookie沒法生成。

頂級域名只能設置domain爲頂級域名，不能設置爲二級域名或者三級域名，不然cookie沒法生成。

二級域名能讀取設置了domain爲頂級域名或者自身的cookie，不能讀取其餘二級域名domain的cookie。因此要想cookie在多個二級域名中共享，須要設置domain爲頂級域名，這樣就能夠在全部二級域名裏面或者到這個cookie的值了。

頂級域名只能獲取到domain設置爲頂級域名的cookie，其餘domain設置爲二級域名的沒法獲取。

總的來講就是，上級域名不能訪問下級域名的cookie，下級域名能夠讀取自身及上級域名的cookie，同級域名的cookie不共享，即同級域名之間不能互相訪問對方的cookie，只能訪問自身的cookie。

path

path字段爲能夠訪問此cookie的頁面路徑。 好比domain是abc.com,path是/test，那麼只有/test路徑下的頁面能夠讀取此cookie。

expires/Max-Age

expires/Max-Age 字段爲此cookie超時時間。若設置其值爲一個時間，那麼當到達此時間後，此cookie失效。不設置此字段時，默認值是Session，即當瀏覽器關閉(注意：不是瀏覽器標籤頁，而是整個瀏覽器) 後，此cookie失效。

let expireDate = new Date("2019-5-26T09:00:00");
document.cookie += ";expires=" + expireDate.toString();
複製代碼

若要刪除某條cookie則設置此條cookie的expires爲當前時間以前的時間的便可

let expireDate = new Date("1970-01-01T00:00:00");
document.cookie += ";expires=" + expireDate.toString();
複製代碼

size

Size字段 此cookie大小。

httpOnly

若此屬性爲true，則只有在http請求頭中會帶有此cookie的信息，而不能經過document.cookie來訪問此cookie，設置爲true能夠減小受到Xss攻擊的風險

secure

secure 字段 設置是否只能經過https來傳遞此條cookie

localstorage/sessionstorage

webstorage並非要替代cookie，而是爲了彌補隨着web的發展，cookie在存儲限制（存儲容量最多爲4k），安全性（在http協議中明文傳輸）存在的缺點而提出的

二者的API是相同的

function	intro
setItem(key, value)	以鍵值對的形式保存一條數據
getItem(key)	根據鍵來得到值
removeItem(key)	根據鍵來刪除一條數據
key(index)	根據索引得到鍵的名稱
clear()	刪除所有數據

二者都有length屬性

sessionStorage.setItem("name", "Jack");
sessionStorage.setItem("phone", "18856894523");
console.log(sessionStorage.getItem('name'));  // Jack
console.log(sessionStorage.key(0));  // name
console.log(sessionStorage.length);  // 2
sessionStorage.removeItem('phone');
console.log(sessionStorage.length);  // 1
sessionStorage.clear();              
console.log(sessionStorage.length);  // 0
複製代碼

二者的比較

• localStorage和sessionStorage都是用來存儲客戶端臨時信息的對象。均只能存儲字符串類型的對象，雖然規範中能夠存儲其餘原生類型的對象，可是目前爲止沒有瀏覽器對其進行實現。
• localStorage生命週期是永久，除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。
• sessionStorage生命週期爲當前窗口或標籤頁，一旦窗口或標籤頁被永久關閉了，sessionStorage存儲的數據就被清空了。
• 不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。
• 相同瀏覽器的不一樣頁面（頁面屬於相同域名和端口）間能夠共享相同的localStorage
• 不一樣頁面或標籤頁間沒法共享sessionStorage的信息。注意，頁面及標籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。
• 使用window.open打開頁面和改變localtion.href方式均可以獲取到sessionStorage內部的數據

cookie 與 webstorage的區別

• 存儲限制
  • 每一個domain中只能存儲最多20條cookie，cookie數據不能超過4K
  • webStorage也有存儲大小的限制，可是比cookie大得多，能夠達到5M或更大
• 數據的有效期
  • sessionStorage：僅在當前的瀏覽器窗口關閉有效；
  • localStorage：始終有效，除非用戶手動刪除
  • cookie：cookie過時時間以前一直有效，即便窗口和瀏覽器關閉
• 做用域
  • sessionStorage：不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
  • localStorage：同源窗口共享
  • cookie：同源窗口共享