sessionStorage、localStorage用法總結
阿新 • • 發佈:2019-01-05
- 作用:首先說明一下:sessionStorage和localStorage一樣都是用來儲存客戶端臨時資訊的物件。
- 儲存內容的資料型別:兩者皆儲存字串型別的資料。
生命週期:
- sessionStorage:生命週期是當前視窗或標籤頁,一旦視窗或標籤頁被關閉了,那麼所有通過sessionStorage儲存的資料也就被清空了。
- localStorage:生命週期是永久,這意味著除非使用者顯式操作在瀏覽器提供的UI上清除localStorage資訊,否則這些資訊將永遠存在。
資訊是否可共享: 不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的localStorage(頁面屬於相同域名和埠),但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是,頁面及標籤頁僅指頂級視窗,如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面,那麼他們之間是可以共享sessionStorage的。
html5 web storage的瀏覽器支援情況
瀏覽器的支援除了IE7及以下不支援外,其他標準瀏覽器都完全支援(ie及FF需在web伺服器裡執行)。localStorage和sessionStorage操作(下面例子以sessionStorate為例)
- setItem儲存value
sessionStorage.setItem(“key”,”value”);//以“key”為名稱儲存一個值“value”
eg: sessionStorage.setItem(“realName”,”韓梅梅”); - getItem獲取value
sessionStorage.getItem(“key”);//獲取名稱為“key”的值 - removeItem(“key”) 刪除key
sessionStorage.removeItem(“realName”); - clear() 清除所有內容
sessionStorage.clear();//清空sessionStorage中所有資訊。
localStorage也擁有以上四個方法
- setItem儲存value
* 點操作和[]*
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);
}
以上知識點是目前遇到的問題以及查詢資料實踐所得!總結一下~~