目錄

localStorage與sessionStorage

localStorage的Set與Get

localStorage傳遞參數(shù)

---

localStorage與sessionStorage

現(xiàn)代瀏覽器提供了一種被稱為"Web Storage APIs"（Web 存儲接口）的機(jī)制，允許在同一瀏覽器的不同標(biāo)簽頁之間共享數(shù)據(jù)。其中，有兩種常見的 Web 存儲類型：localStorage 和 localStorage。

兩種 Web 存儲類型的使用方法非常類似，它們都提供了一個 key-value 的存儲方式，并在瀏覽器上下文中保存數(shù)據(jù)。localStorage中存儲的數(shù)據(jù)在同一瀏覽器的所有標(biāo)簽頁中都是共享的，而sessionStorage僅在每個標(biāo)簽頁內(nèi)部共享數(shù)據(jù)。

localStorage的Set與Get

在頁面中設(shè)置數(shù)據(jù)：

localStorage.setItem("key", "value");

在其他頁面中獲取數(shù)據(jù)：

var data = localStorage.getItem("key");

需要注意的是，localStorage 存儲的數(shù)據(jù)只在同一瀏覽器中有效，如果用戶更換了瀏覽器或在另一臺設(shè)備上打開網(wǎng)站，則無法訪問之前存儲的數(shù)據(jù)。此外，對于同一域名下的不同子域名，它們之間也不能共享 Web 存儲數(shù)據(jù)，例如，example.com 和 www.example.com 之間不能直接共享 storage 數(shù)據(jù)。

localStorage傳遞參數(shù)

在使用 localStorage.setItem() 方法存儲數(shù)據(jù)時，需要將 JavaScript 對象類型的數(shù)據(jù)轉(zhuǎn)換成字符串類型?？梢允褂?JSON.stringify() 方法將 JavaScript 對象序列化為 JSON 字符串，然后再將其存儲到 localStorage 中。

例如，在下面的示例中，我們將一個包含多個屬性的 JavaScript 對象存儲到 localStorage 中：

var user = {name: "John",age: 30,email: "john@example.com"
};
?
// 將 JavaScript 對象轉(zhuǎn)換為 JSON 字符串，并存儲到 localStorage 中
localStorage.setItem("user", JSON.stringify(user));

如果不進(jìn)行 JSON 轉(zhuǎn)換，將直接將 JavaScript 對象存儲到 localStorage 中，這樣可能會導(dǎo)致一些問題。因為 localStorage 只能存儲字符串類型的數(shù)據(jù)，如果存儲非字符串類型的數(shù)據(jù)，則可能無法正確解析或讀取這些數(shù)據(jù)。

在讀取存儲的數(shù)據(jù)時，可以使用 JSON.parse() 方法將 JSON 字符串轉(zhuǎn)換回 JavaScript 對象類型：

// 從 localStorage 中讀取數(shù)據(jù)，并將其轉(zhuǎn)換為 JavaScript 對象
var storedUser = JSON.parse(localStorage.getItem("user"));
?
// 訪問對象的屬性
console.log(storedUser.name); // 輸出：John
console.log(storedUser.age); // 輸出：30
console.log(storedUser.email); // 輸出：john@example.com

因此，建議在使用 localStorage 存儲數(shù)據(jù)時先進(jìn)行 JSON 轉(zhuǎn)換，以確保數(shù)據(jù)能夠正確存儲和讀取。