WEB前端培訓(xùn)之web Storage可讓網(wǎng)頁將資料存于本地端的技術(shù)2

更新時間:2017-06-09 來源:黑馬程序員web前端培訓(xùn)學(xué)院瀏覽量:

從 Storage 中讀取資料時，則用 getItem 方法：
var value1 = window.localStorage.getItem("MyKeyName");

var value2 = window.sessionStorage.getItem("MyKeyName");
　　在使用 Storage 物件時，前面的 "window" 也可以省略不寫，而且還可以用陣列索引以及屬性的寫法，因此底下的程式片段的每一行作用皆相同：
　　window.localStorage.setItem("MyKeyName", "MyDataValue");

localStorage.setItem("MyKeyName", "MyDataValue");

localStorage["MyKeyName"] = "Hello";

localStorage.MyKeyName = "Hello";
　　儲存在 Web Storage 裡面的資料都可以跨頁面，也就是說，使用者點進去某個網(wǎng)頁之后，先前由上一個網(wǎng)頁所儲存于 Web Storage 的資料，都可以在后續(xù)的網(wǎng)頁中取得。
　　注意：有些瀏覽器可能允許你存入字串之外的型別，但 HTML5 的標(biāo)準(zhǔn)是只能存入字串。
　　清除
　　唿叫 removeItem 方法可以移除某一筆資料，例如：
localStorage.removeItem("MyKeyName");
　　如果要清除 Storage 物件中的全部資料，可用 clear 方法。

范例代碼：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="Scripts/modernizr-2.5.3.js" type="text/javascript"></script>

<script type="text/javascript">

function onLoad() {

outputArea.value = window.localStorage.remainingSpace;

btnSave.addEventListener("click", saveToStorage);

btnLoadFromLocalStorage.addEventListener("click", loadFromLocalStorage);

btnLoadFromSessionStorage.addEventListener("click", loadFromSessionStorage);

}

function saveToStorage() {

//window.localStorage.setItem("UserData", inputArea.value);

//localStorage.setItem("UserData", inputArea.value);

//localStorage["UserData"] = inputArea.value;

localStorage.UserData = inputArea.value;

sessionStorage.UserData = inputArea.value;

}

function loadFromLocalStorage() {

outputArea.value = localStorage["UserData"];

}

function loadFromSessionStorage() {

outputArea.value = sessionStorage["UserData"];

}

</script>

</head>

<body onload="onLoad()">

Input: <textarea id="inputArea"></textarea>

Output: <textarea id="outputArea"></textarea>

<button id="btnSave">儲存到 local 于 session storage</button>

<button id="btnLoadFromLocalStorage">從 local storage 載入資料</button>

<button id="btnLoadFromSessionStorage">從 session storage 載入</button>

</body>

</html>