首页技术文章正文

WEB前端培训之web Storage可让网页将资料存于本地端的技术2

更新时间:2016年11月23日10时04分来源:传智播客web前端培训学院浏览次数:

从 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 裡面的资料都可以跨页面，也就是说，使用者点进去某个网页之后，先前由上一个网页所储存于 Web Storage 的资料，都可以在后续的网页中取得。
　　注意：有些浏览器可能允许你存入字串之外的型别，但 HTML5 的标准是只能存入字串。
　　清除
　　唿叫 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>