1. 程式人生 > >sessionStorage、localStorage用法總結

sessionStorage、localStorage用法總結

  1. 作用:首先說明一下:sessionStorage和localStorage一樣都是用來儲存客戶端臨時資訊的物件。
  2. 儲存內容的資料型別:兩者皆儲存字串型別的資料。
  3. 生命週期

    1. sessionStorage:生命週期是當前視窗或標籤頁,一旦視窗或標籤頁被關閉了,那麼所有通過sessionStorage儲存的資料也就被清空了。
    2. localStorage:生命週期是永久,這意味著除非使用者顯式操作在瀏覽器提供的UI上清除localStorage資訊,否則這些資訊將永遠存在。
  4. 資訊是否可共享: 不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的localStorage(頁面屬於相同域名和埠),但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是,頁面及標籤頁僅指頂級視窗,如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面,那麼他們之間是可以共享sessionStorage的。

  5. html5 web storage的瀏覽器支援情況
          瀏覽器的支援除了IE7及以下不支援外,其他標準瀏覽器都完全支援(ie及FF需在web伺服器裡執行)。

  6. localStorage和sessionStorage操作(下面例子以sessionStorate為例)

    1. setItem儲存value
      sessionStorage.setItem(“key”,”value”);//以“key”為名稱儲存一個值“value”
      eg: sessionStorage.setItem(“realName”,”韓梅梅”);
    2. getItem獲取value
      sessionStorage.getItem(“key”);//獲取名稱為“key”的值
    3. removeItem(“key”) 刪除key
      sessionStorage.removeItem(“realName”);
    4. clear() 清除所有內容
      sessionStorage.clear();​//清空sessionStorage中所有資訊。
      localStorage也擁有以上四個方法
  7. * 點操作和[]*
    web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通物件一樣用點(.)操作符,及[]的方式進行資料儲存,像如下的程式碼:

var storage = window.localStorage; 
    storage.key1 = "hello"
; storage['key2']="world"; console.log(storage.key1); // 結果:hello console.log(storage["key2"]); // 結果world

8.存與取

var tempInfo = { realName:$("#realName").val(),idNo:$("#idNo").val()};
  var str1 = JSON.stringify(tempInfo); 
       sessionStorage.tempInfo = str1; 
   取
  var str=sessionStorage.tempInfo;
    if(str !='' && str != undefined){
        var obj = JSON.parse(str);
        $('#realName').val(obj.realName);
    }

以上知識點是目前遇到的問題以及查詢資料實踐所得!總結一下~~