我不會(huì)告訴你任何定義和概念，上車，讀完這篇博客，你就會(huì)對本地存儲(chǔ)(Local Storage) 和 會(huì)話存儲(chǔ)(Session Storage)有一個(gè)清晰的認(rèn)識(shí)。

前提知識(shí)

請按照我以下的步驟來：

1、在任意網(wǎng)頁中按F12打開開發(fā)者工具

2、單擊Application，即應(yīng)用

3、單擊存儲(chǔ)，您將在那里看到本地存儲(chǔ)和會(huì)話存儲(chǔ)。

本地存儲(chǔ)和會(huì)話存儲(chǔ)都存儲(chǔ)鍵值對。

本地存儲(chǔ)和會(huì)話存儲(chǔ)的主要區(qū)別在于，在 關(guān)閉瀏覽器 后，存儲(chǔ)在 會(huì)話存儲(chǔ) 中的鍵值對會(huì)丟失。

范例

現(xiàn)在，讓我們通過一些示例來了解如何對本地存儲(chǔ)進(jìn)行操作。

示例1：將鍵值對提供給本地存儲(chǔ)

localStorage.setItem('Name1', 'uiu');

控制臺(tái)執(zhí)行，查看效果

讓我們看看本地存儲(chǔ)的“ typeof ”：

示例2: 本地存儲(chǔ)中設(shè)置鍵值對

在上面的示例中，我們看到了 如何在本地存儲(chǔ)中設(shè)置鍵值對。

現(xiàn)在，讓我們了解如何從本地存儲(chǔ)中獲取鍵值對。

let Name1 = localStorage.getItem('Name1')
console.log(Name1)

示例3: 獲取空值

現(xiàn)在，讓我們嘗試獲取一些不存在的值。

let Name2 = localStorage.getItem('Name2');
console.log(Name2)

如果您嘗試從不存在的本地存儲(chǔ)中獲取某些內(nèi)容，則結(jié)果為 null 。

很多時(shí)候我們希望將數(shù)組存儲(chǔ)在本地存儲(chǔ)中，因?yàn)閿?shù)組很容易使用（我們有很多內(nèi)置的數(shù)組方法）。

但是，本地存儲(chǔ)的一個(gè)限制是它將數(shù)組存儲(chǔ)為字符串。讓我們看看我的意思：

// 本地存儲(chǔ)
localStorage.setItem('WebSite', 'uiuing.com');

// 定義ProgrammingLanguage數(shù)組
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
// 本地存儲(chǔ)存儲(chǔ) ProgrammingLanguage數(shù)組
localStorage.setItem('favoriteProgrammingLanguage', ProgrammingLanguage);

為了克服這個(gè)問題??，我們使用 JSON.stringify。請看下面的實(shí)際操作

示例 4：將數(shù)組存儲(chǔ)在本地存儲(chǔ)中

現(xiàn)在我們使用 JSON.stringify 將數(shù)組存儲(chǔ)在本地存儲(chǔ)中

localStorage.setItem('WebSite', 'uiuing.com');
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']

// 這里講原先的ProgrammingLanguage 修改為了 JSON.stringify(ProgrammingLanguage)
localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

示例 5：從本地存儲(chǔ)中獲取數(shù)組

從本地存儲(chǔ)中獲取數(shù)組。

上面的結(jié)果可能看起來像一個(gè)數(shù)組，但我們從本地存儲(chǔ)而不是數(shù)組獲取字符串。

讓我證明一下。

因此，為了從本地存儲(chǔ)中獲取數(shù)組，我們使用 JSON.parse ，見下文。

示例 6：從本地存儲(chǔ)中獲取數(shù)組？

現(xiàn)在我們 JSON.parse 使用從本地存儲(chǔ)中獲取數(shù)組

console.log(JSON.parse(localStorage.getItem('favoriteProgrammingLanguage')));

因此，我們使用：

JSON.stringify：將數(shù)組設(shè)置為本地存儲(chǔ)中的值。JSON.parse：從本地存儲(chǔ)中獲取數(shù)組。

示例 7：清除本地存儲(chǔ)

清理前

localStorage.clear()

運(yùn)行后

因此，我們可以使用 localStorage.clear() 來清除本地存儲(chǔ)

僅從本地存儲(chǔ)中刪除“name1”鍵值對。

示例 8：僅從本地存儲(chǔ)中刪除 Name1 鍵值對

localStorage.setItem('Name1', 'uiu');
localStorage.setItem('WebSite', 'uiuing.com');

let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
localStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

運(yùn)行這條命令試試

localStorage.removeItem('Name1');

正如您在上面看到的，為了刪除我們使用的特定鍵值對 localStorage.removeItem 。

會(huì)話存儲(chǔ)

這就是關(guān)于本地存儲(chǔ)的全部內(nèi)容。

我們在 會(huì)話存儲(chǔ) 中運(yùn)行類似的操作，唯一的區(qū)別是我們 使用 sessionStorage 代替 localStorage ：

// 示例1
sessionStorage.setItem('Name1', 'uiu');

// 示例2
sessionStorage.getItem('Name1');

// 示例4
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
sessionStorage.setItem('favoriteProgrammingLanguage',JSON.stringify(ProgrammingLanguage));

// 示例6
console.log(JSON.parse(sessionStorage.getItem('favoriteProgrammingLanguage')));

// 示例7
sessionStorage.clear()

// 示例8
sessionStorage.removeItem('Name1');

讓我們運(yùn)行一下

sessionStorage.setItem('Name1', 'uiu');

接下來我們關(guān)閉該網(wǎng)頁，然后重新打開

此時(shí)會(huì)話存儲(chǔ)的數(shù)據(jù)已經(jīng)消失了，而之前示例運(yùn)行的數(shù)據(jù)在本地存儲(chǔ)中還存在

總結(jié)

讓我重申一下：本地存儲(chǔ)和會(huì)話存儲(chǔ)之間唯一的主要區(qū)別是，一旦我們關(guān)閉瀏覽器，我們就會(huì)丟失會(huì)話存儲(chǔ)中保存的任何內(nèi)容。但是，本地存儲(chǔ)并非如此。

最后，讓我們看看 MDN 怎么說：

• 窗口界面的 localStorage 只讀屬性允許您訪問 Document 來源的 Storage 對象；存儲(chǔ)的數(shù)據(jù)跨瀏覽器會(huì)話保存。

• 只讀 sessionStorage 屬性訪問當(dāng)前源的會(huì)話存儲(chǔ)對象。sessionStorage 類似于 localStorage；不同之處在于，雖然 localStorage 中的數(shù)據(jù)不會(huì)過期，但 sessionStorage 中的數(shù)據(jù)會(huì)在頁面會(huì)話結(jié)束時(shí)被清除。

 到此這篇關(guān)于JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用的文章就介紹到這了,更多相關(guān)JavaScript本地存儲(chǔ)和會(huì)話存儲(chǔ)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論