JavaScript中本地儲存(LocalStorage)和對談儲存(SessionStorage)的使用

2022-03-21 16:00:28

範例1：將鍵值對提供給本地儲存
範例2: 本地儲存中設定鍵值對
範例3: 獲取空值
範例 4：將陣列儲存在本地儲存中
範例 5：從本地儲存中獲取陣列
範例 6：從本地儲存中獲取陣列？
範例 7：清除本地儲存
範例 8：僅從本地儲存中刪除 Name1 鍵值對
對談儲存

總結

我不會告訴你任何定義和概念，上車，讀完這篇部落格，你就會對本地儲存(Local Storage) 和對談儲存(Session Storage)有一個清晰的認識。

前提知識

請按照我以下的步驟來：

1、在任意網頁中按F12開啟開發者工具

2、單擊Application，即應用

3、單擊儲存，您將在那裡看到本地儲存和對談儲存。

本地儲存和對談儲存都儲存鍵值對。

本地儲存和對談儲存的主要區別在於，在 關閉瀏覽器 後，儲存在 對談儲存 中的鍵值對會丟失。

範例

現在，讓我們通過一些範例來了解如何對本地儲存進行操作。

範例1：將鍵值對提供給本地儲存

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

控制檯執行，檢視效果

讓我們看看本地儲存的“ typeof ”：

範例2: 本地儲存中設定鍵值對

在上面的範例中，我們看到了 如何在本地儲存中設定鍵值對。

現在，讓我們瞭解如何從本地儲存中獲取鍵值對。

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

範例3: 獲取空值

現在，讓我們嘗試獲取一些不存在的值。

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

如果您嘗試從不存在的本地儲存中獲取某些內容，則結果為 null 。

很多時候我們希望將陣列儲存在本地儲存中，因為陣列很容易使用（我們有很多內建的陣列方法）。

但是，本地儲存的一個限制是它將陣列儲存為字串。讓我們看看我的意思：

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

// 定義ProgrammingLanguage陣列
let ProgrammingLanguage = ['Java', 'Python', 'JavaScript', 'GO+']
// 本地儲儲存存 ProgrammingLanguage陣列
localStorage.setItem('favoriteProgrammingLanguage', ProgrammingLanguage);

為了克服這個問題☝️，我們使用 JSON.stringify。請看下面的實際操作

範例 4：將陣列儲存在本地儲存中

現在我們使用 JSON.stringify 將陣列儲存在本地儲存中

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

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

範例 5：從本地儲存中獲取陣列

從本地儲存中獲取陣列。

上面的結果可能看起來像一個陣列，但我們從本地儲存而不是陣列獲取字串。

讓我證明一下。

因此，為了從本地儲存中獲取陣列，我們使用 JSON.parse ，見下文。

範例 6：從本地儲存中獲取陣列？

現在我們 JSON.parse 使用從本地儲存中獲取陣列

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

因此，我們使用：

JSON.stringify：將陣列設定為本地儲存中的值。JSON.parse：從本地儲存中獲取陣列。

範例 7：清除本地儲存

清理前

localStorage.clear()

執行後

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

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

範例 8：僅從本地儲存中刪除 Name1 鍵值對

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

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

執行這條命令試試

localStorage.removeItem('Name1');

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

對談儲存

這就是關於本地儲存的全部內容。

我們在 對談儲存 中執行類似的操作，唯一的區別是我們使用 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');

讓我們執行一下

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

接下來我們關閉該網頁，然後重新開啟

此時對談儲存的資料已經消失了，而之前範例執行的資料在本地儲存中還存在

總結

讓我重申一下：本地儲存和對談儲存之間唯一的主要區別是，一旦我們關閉瀏覽器，我們就會丟失對談儲存中儲存的任何內容。但是，本地儲存並非如此。

最後，讓我們看看 MDN 怎麼說：

視窗介面的 localStorage 唯讀屬性允許您存取 Document 來源的 Storage 物件；儲存的資料跨瀏覽器對談儲存。
唯讀 sessionStorage 屬性存取當前源的對談儲存物件。sessionStorage 類似於 localStorage；不同之處在於，雖然 localStorage 中的資料不會過期，但 sessionStorage 中的資料會在頁面對談結束時被清除。

到此這篇關於JavaScript中本地儲存(LocalStorage)和對談儲存(SessionStorage)的使用的文章就介紹到這了,更多相關JavaScript本地儲存和對談儲存內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！