HTML5 - Storage 儲存功能介紹

HTML5的Storage儲存主要分為兩種:localStorage與sessionStorage,這兩者主要差別在於生命週期上有較明顯,localStorage的生命週期較長,原則上要等到透過Javascript將內容清掉或者使用者清空瀏覽器Cache時才會消失;而sessionStorage則是在瀏覽器或標籤頁關閉時就會被清除。其每一筆資料皆以key-value的方式存在。

與原本也可以用來儲存資料的瀏覽器Cookie不同的地方是,Storage的空間較大(至少5MB,而Cookie才4KB),而且資料永遠都不會被傳到到伺服器。同一個網域的所有網頁都可以共同存取到相同的資料。且比起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 中的暫存值是有留下紀錄的。

留言

這個網誌中的熱門文章

c語言-關於#define用法

CMD常用網管指令

使用windows CMD 時間自動校正