HTML5 - Storage 儲存功能介紹
HTML5的Storage儲存主要分為兩種：localStorage與sessionStorage，這兩者主要差別在於生命週期上有較明顯，localStorage的生命週期較長，原則上要等到透過Javascript將內容清掉或者使用者清空瀏覽器Cache時才會消失；而sessionStorage則是在瀏覽器或標籤頁關閉時就會被清除。其每一筆資料皆以key-value的方式存在。
與原本也可以用來儲存資料的瀏覽器Cookie不同的地方是，Storage的空間較大（至少５ＭＢ，而Cookie才４ＫＢ），而且資料永遠都不會被傳到到伺服器。同一個網域的所有網頁都可以共同存取到相同的資料。且比起Cookie，Storage安全性較高且效能也較好。
提供範例程式說明
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf8">
<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>
執行該程式後會發現開啟 firebug 中可以檢查 session storage 及 localstorage 中的暫存值是有留下紀錄的。
與原本也可以用來儲存資料的瀏覽器Cookie不同的地方是，Storage的空間較大（至少５ＭＢ，而Cookie才４ＫＢ），而且資料永遠都不會被傳到到伺服器。同一個網域的所有網頁都可以共同存取到相同的資料。且比起Cookie，Storage安全性較高且效能也較好。
提供範例程式說明
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf8">
<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>
留言
張貼留言