Web Storage

Web Storage

特性：只在本地端存取，資料不會回傳伺服器。

判斷瀏覽器是否支援

if(typeof(Storage)==="undefined") {

alert("瀏覽器不支援WebStorage");

} else {...}

localStorage

生命週期：同源政策，適合跨網頁操作。

寫入 window.localStorage.setItem(key, value);

ex: window.localStorage.setItem("userdata", "學號");

讀取 window.localStorage.getItem(key);

ex: var value = window.localStorage.getItem("userdata");

索引(中括號)

寫入 window.localStorage["userdata"] = "學號";

讀取 var value = window.localStorage["userdata"];

屬性(.)

寫入 window.localStorage.userdata = "學號";

讀取 var value = window.localStorage.userdata;

刪除(單一key)

window.localStorage.removeItem("userdata");

delete window.localStorage["userdata"];

delete window.localStorage.userdata;

清除全部

localStorage.clear();

sessionStorage

生命週期：只存在於單一網頁或分頁，關閉即消失。

儲存

window.sessonStorage.setItem("userdata", "學號");

window.sessonStorage["userdata"] = "學號";

window.sessonStorage.userdata = "學號";

讀取

var value1 = window.sessonStorage.getItem("userdata");

var value2 = window.sessonStorage["userdata"];

var value3 = window.sessonStorage.userdata;

清除

window.sessonStorage.removeItem("userdata");

delete window.sessonStorage["userdata"];

delete window.sessonStorage.userdata;

//全部清除

sessionStorage.clear();

參考文獻

https://medium.com/@globelex65/%E7%AD%86%E8%A8%98-%E7%80%8F%E8%A6%BD%E5%99%A8%E7%9A%84%E5%84%B2%E5%AD%98%E7%A9%BA%E9%96%93-local-storage-d988a51169b6

HTML5+CSS3+JavaScript 榮欽科技、陳婉凌 著