面試之HTML5 Web存儲

　　前幾天面試遇到了一個題是問localStorage和sessionStorage的區別，當時的回答不是很全面，今天就針對這個問題作一下整理（概念，用法，區別）

　　HTML5 Web存儲，一個比 cookie 更好的本地存儲方式，什麼是 HTML Web存儲？

　　定義：使用HTML5 能夠在本地存儲用戶的瀏覽數據。早些時候，本地存儲使用的是 cookie，可是Web存儲須要加載更加的安全與快速，這些數據不會被保存在服務器上，可是這些數據只用於用戶請求網站，它也能夠存儲大量的數據，而不影響網站的性能。（數據以鍵/值對存在，web網頁的數據只容許該網頁訪問使用）

 

localStorage（本地存儲）

 

　　localStorage 對象存儲的數據沒有時間限制，用於長久保存整個網站的數據

經常使用API（localStorage至關於window下面的一個屬性，故可使用 . 方法和 [] 方法）

• 保存數據

  localStorage.name = 'zhangsan'
  // 或者
  localStorage.['name'] = 'zhangsan'
  // 或者
  localStorage.getIten('name','zhangsan')

• 讀取數據

  1 // 自身方法
  2 localStorage.getItem("name");
  3 // []方法
  4 localStorage["name"];
  5 // .方法
  6 localStorage.name;

• 刪除單個數據（使用delete關鍵字）

  1 // 自身方法
  2 localStorage.removeItem("name");
  3 // []方法
  4 delete localStorage["name"];
  5 // .方法
  6 delete localStorage.name

• 刪除全部數據

  1 localStorage.clear()
  

• 獲得某個索引的值

  1 1 // 經過自身的key
  2 2 for (var i=0;i<localStorage.length;i++) {
  3 3     console.log(localStorage.key(i));
  4 4 }
  5 5 
  6 6 // 經過for in 循環獲取
  7 7 for(var key in localStorage){
  8 8     console.log(key);
  9 9 }

• 獲取全部值

  1 localStorage.valueOf();取出全部的值

• 判斷是否具備某個key

  1 localStorage.hasOwnProperty("name")
  2 // 若是存在的話返回true，不存在返回false

注：1.localStorage特定於頁面的協議，不在同一域名下不能訪問

　　2.數據有大小限制，5M左右，不一樣瀏覽器大小會有不一樣

　　3.生命週期是永久的，可是數據實際是存在瀏覽器的文件夾下的，卸載瀏覽器數據可能就會刪除

　　4.瀏覽器能夠設置是否能夠訪問數據，若是設置不容許則會訪問失敗

　　5.兼容IE8以上瀏覽器

　　6.默認狀況下是以字符串形式存儲的，能夠根據我的須要進行數據類型轉換

 

sessionStorage（會話存儲）

　　sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除

經常使用API（同上，和localStorage相似）

注意事項也和localStorage相似，惟一不一樣的就是數據存儲週期不同