關於localStorage的儲存,讀取,刪除

2022-04-06 13:00:57

localStorage的儲存,讀取,刪除

我們通過以下方式將資料儲存到localStorage中

window.localStorage.setItem('key',value)

但有時value為一個物件Object，以上面的方式寫入，會出現讀取的返回值為{object Object}的情況，但這並不是我們想要的，此時我們需要使用新的方式

傳入Object

window.localStorage.setItem('param',JSON.stringify(Object))

通過JSON.stringify(Object)方法將物件轉化為一個json格式的字串進行儲存

我們通過以下方式來讀取localStorage中的值

window.localStorage.getItem('key')

相對的在讀取json格式字串只有我們也無法直接使用，需要將它轉換為josn物件之後才是我們想要的結果，所以我們需要呼叫 JSON.parse()方法來進行轉化，之後在繼續使用

JSON.parse(window.localStorage.getItem('key'))

我們通過以下方法來刪除對應key以及key中的內容

window.localStorage.removeItem('key')

localStorage清空所有的key

清空localStorage中所有的key;

注意：請謹慎使用,它會清空所有的本地儲存資料

window.localStorage.clear()

localStorage 和 sessionStorage 一樣，都是 HTML5 中最新引入的 Web 儲存 API。

Web 儲存 API，英文為 Web Storage API，通過它可以方便地在使用者瀏覽器中儲存鍵值對。

Web 儲存 API 包括兩個物件：

在 HTML5 之前，應用資料需要存放在 Cookie 中，每次請求時都需要攜帶它。相較而言，Web 儲存 API 擁有以下優點：

除此之外，localStorage 還有以下特點：

為 localStorage 新增或修改資料有三種方式：

localStorage.age = 100
localStorage['age'] = 100
localStorage.setItem('age', 100)  // 推薦使用

在 localStorage 中檢視資料也有三種方式：

localStorage.age
localStorage['age']
localStorage.getItem('age')  // 推薦使用

在 localStorage 中刪除資料有三種方式：

delete localStorage.age
delete localStorage['age']
localStorage.removeItem('age')  // 推薦使用

清空整個 localStorage：

// 清空整個 localStorage
localStorage.clear()

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。