web存儲機制(localStorage和sessionStorage)


web存儲包括兩種:sessionStorage 和 localStorage(都是限定在文檔源級別,非同源文檔間無法共享)

1.sessionStorage 數據放在服務器上(IE不支持) 嚴格用於一個瀏覽器會話中存儲數據,數據在瀏覽器關閉后會立即刪除 2.localStorage 數據在客戶端(低版本IE ( IE6, IE7 ) 不支持,並且不支持查詢語言) 跨會話持久化地存儲數據 localStorage與sessionStorage的區別: localStorage只要在相同的協議、相同的主機名、相同的端口下,即同源就能讀取/修改到同一份localStorage數據。 sessionStorage比localStorage更嚴苛一點,除了協議、主機名、端口外,還要求在同一窗口(也就是瀏覽器的標簽頁)下。 用法相同:(以sessionStorage為例) 1.添加: sessionStorage.setItem(key, value);//value可以任何數據類型 2.獲取: sessionStorage.getItem(key); 3.刪除: sessionStorage.removeItem(key);//刪除該存儲對象中key的鍵值對 4.清除所有: sessionStorage.clear();//清除該存儲對象中所有的鍵值對 5.檢索(查): sessionStorage.key();//檢索key[n]的值 實例:
    localStorage.setItem("x",1);//以"x"的名字存儲一個數值
    localStorage.x = 1;//直接向 Web 存儲對象添加鍵/值對
    
    localStorage.getItem("x");//獲取數值
    localStorage.x;//直接從 Web 存儲對象中檢索鍵/值對
    
    localStorage.removeItem("x");//刪除“x”項。
    //removeItem是唯一通用的能刪除單個名值對的方式。(因為IE8不支持delete操作符)
    localStorage.clear();//全部刪除。唯一能刪除存儲對象中所有名值對的方式
    
    //將一個數組存儲為字符串
    var myArray = new Array('First Name', 'Last Name', 'Email Address');
    localStorage.formData = JSON.stringify(myArray);
    
    //檢索數組的字符串版本並將它轉換成一個可用的 JavaScript 數組
    var myArray = JSON.parse(localStorage.formData);
 還有一種更實用的存取方法:
    var obj = {
            name: 'doctorhou',
            describe: '高大、威猛、帥氣'
        };
        localStorage.setItem('test', JSON.stringify(obj));
        JSON.parse(localStorage.getItem('test'));
    
    // 存儲數據發生改變的時候(對應事件):window.onstorage    

示例:

  <body>
        <h3>這是我的用戶名和密碼</h3>
        <div id="username"></div>
        <div id="password"></div>
        <script>
        // 1.獲取對象
        var username = document.getElementById('username');
        var password = document.getElementById('password');
    
        // 2.將存儲的數據寫入到兩個div中
        username.innerHTML = localStorage.getItem('username');
        password.innerHTML = localStorage.getItem('password');
    
        // 3.做stroage的事件監聽
        window.onstorage = function(e) {
            // StorageEvent
            // console.log(e);
            // console.log(e.key);修改的鍵
            // console.log(e.oldValue);原來的值
            // console.log(e.newValue);新值
            username.innerHTML = e.newValue;
        }
        </script>
    </body>

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM