標籤：body cal 持久化 UNC html tor des 無法 local
https://www.cnblogs.com/yaoyuqian/p/7901052.html
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));
var getObj = 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>
web儲存機制localStorage和sessionStorage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
