localStorage、sessionStorage、cookie的使用

記錄localStorage、sessionStorage和cookie的使用。

h5本地存儲：

介紹

• localStorage
  永久保存 不一樣頁面和標籤頁能夠共享 關閉瀏覽器不會清除
• sessionStorage
  會話保存 不一樣頁面和標籤頁不能共享 關閉瀏覽器會清除

存儲內容：數組、圖片、json、樣式、腳本等只要能序列化爲字符串的均可以
大小：每一個域名5M
遇到的問題：SecurityError (DOM Exception 18): The operation is insecure.
須要在服務器狀態下使用，若是以file://狀態使用會DOM異常的錯誤

原型

• clear()
• getItem(key)
• key(index)
• length
• removeItem(key)
• setItem(key, data)

使用

setItem()

window.localStorage.setItem('name', 'tanyue'); //設置名稱爲「name」的值   關閉瀏覽器不會消失
window.localStorage.setItem("email", 'tanyuetz163.com'); //設置名稱爲「email」的值   關閉瀏覽器不會消失
window.sessionStorage.setItem("email", 'tanyuetz163.com'); //獲取名稱爲「email」的值   關閉瀏覽器消失

getItem()

var local = window.localStorage.getItem('name'); //獲取name的值
var session = window.sessionStorage.getItem('email'); //獲取email的值
console.log(local);
console.log(session);

遍歷

var storage = window.localStorage;
    for (var i = 0, len = storage.length; i < len; i++) {
      var key = storage.key(i);
      var value = storage.getItem(key);
      console.log(key + "=" + value);
    }

removeItem()

window.localStorage.removeItem('name'); //移除name屬性
window.sessionStorage.removeItem("email"); //移除email屬性

clear()

window.localStorage.clear(); //清除localStorage

cookie

當網頁要發送http請求時，瀏覽器會首先檢查是否有相應的cookie,有則自動添加在request header中的cookie字段中。這些是瀏覽器自動幫咱們作的，並且每一次http請求瀏覽器都會自動添加cookie,所以身份驗證信息會很適合放置在cookie中

• 大小：
  每一個個域名下大小爲4k,每一個域名下數量最多爲20個
• 設置cokie:
  `"key=name; expires=Thu, 25 Feb 2017 04:18:00 GMT;
  domain=xxx.xxx.com; path=/; secure; HttpOnly"`(屬性之間用分號和空格隔開)

方法：

document.cookie = "name=Jonh; age=12; class=111";
//不能經過這種方式設置多個cookie

//只能經過這種屢次添加的方式設置cookie
document.cookie = "name=abc";
document.cookie = "age=22";
//修改cookie  從新賦值
document.cookie = "class=222";
//刪除刪除 cookie
//刪除一個cookie 也挺簡單，也是從新賦值，只要將這個新cookie的expires 選項設置爲一個過去的時間點就好了。但一樣要注意，path/domain/這幾個選項必定要舊cookie 保持同樣。
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = "name=Jonh; expires=" + date.toGMTString();
//cookie編碼
// cookie實際上是個字符串，但這個字符串中逗號、分號、空格被當作了特殊符號。因此當cookie的 key 和 value 中含有這3個特殊字符時，須要對其進行額外編碼，通常會用escape進行編碼，讀取時用unescape進行解碼；固然也能夠用encodeURIComponent/decodeURIComponent或者encodeURI/decodeURI