網頁存儲 web storage(理論)

web storage提供兩種方式將數據保存在客戶端:一種是localStorage,另一種是sessionStorage;
(一)存儲、讀取和清除localStorage

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>localStorage</title>
    <script type="text/javascript">
        function onLoad(){
            if(typeof(Storage)=="undefined"){
                alert("sorry!");
            }else{
                btn_save.addEventListener("click",saveToLocalStroage);
                btn_load.addEventListener("click",loadFromLocalStrage);
                btn_clear.addEventListener("click",clearLocalStorage);
            }
        }

        function saveToLocalStroage(){
            localStorage.username=inputname.value;
        }
        function loadFromLocalStrage(){
            show_LocalStorage.innerHTML=localStorage.username+"你好,歡迎!"
        }
        function clearLocalStorage(){
            localStorage.clear();
            show_LocalStorage.innerHTML=localStorage.username;
        }
    </script>
</head>
<body onload="onLoad()">
    <label for="userName">請輸入你的名稱:</label><input type="text" id="inputname" value="" />
    <br />
    <div id="show_LocalStorage"></div>
    <button id="btn_save">存儲到LocalStorage</button>
    <button id="btn_load">從LocalStorage讀取數據</button>
    <button id="btn_clear">清除LocalStorage數據</button>
</body>
</html>

(二)存儲、讀取和清除sessionStorage
(1)存儲:
window.sessionStorage.setItem(“userdata”,”hello h5”);
window.sessionStorage[“userdata”]=”hello h5”;
window.sessionStorage.userdata=”hello h5”;

(2)讀取
var valueOne=window.sessionStorage.getItem(“userdata”);
var valueOne=window.sessionStorage[“userdata”];
var valueOne=window.sessionStorage.userdata;

(3)清除
window.sessionStorage.removeItem(“userdata”);
delete window.sessionStorage[“userdata”];
delete window.sessionStorage.userdata;
//全部清除
sessionStorage.clear();

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章