一、 簡述

sessionStorage 和 sessionStorage 是 HTML5 新增的兩個特性，這兩個特性主要是用來作為會話存儲和本地存儲來使用的，解決了 cookie 存儲空間不足的問題；

sessionStorage 屬性允許你訪問一個 session Storage 對象，用于存儲當前會話的數據，存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。

localStorage 屬性允許你訪問一個 Document 源(origin)的對象 Storage 用于存儲當前源的數據，除非用戶人為清除(調用 localStorage api 或則清除瀏覽器數據)， 否則存儲在 localStorage 的數據將被長期保留。

二、 相同點

存儲大小一般均為5M左右

都有同源策略限制，跨域無法訪問

數據僅在客戶端中保進行存儲，并不參與和服務器的通信(不會隨著 http 請求發送到服務器)

以 key 和 value 的形式進行存儲數據， value 值必須為字符串，不為字符串會自動轉型( value 如果是對象則需要轉為 json 進行存儲)

三、 不同點

3.1 生命周期

• localStorage 存儲的數據是永久性的，除非用戶人為刪除否則會一直存在(調用 localStorage api 或則清除瀏覽器數據)。
• sessionStorage 存儲的數據在當前會話結束時會被清除，一旦窗口或者標簽頁被關閉，那么所有通過 sessionStorage 存儲的數據也會被刪除。

3.2 作用域

• localStorage: 在同一個瀏覽器內，同源文檔之間共享 localStorage 數據，可以互相讀取、覆蓋、清除(同瀏覽器限制、同源限制)
• sessionStorage: 與 localStorage 一樣需要同一瀏覽器同源文檔這一條件。除此之外 sessionStorage 的作用域還被限定在了窗口中，也就是說，只有同一瀏覽器、同一窗口的同源文檔才能共享數據(同瀏覽器限制、同源限制、同標簽頁限制)

四、 操作

sessionStorage localStorage 在操作上沒什么區別，下面以 sessionStorage 為例：

4.1 新增、修改

• 通過 setItem 添加、修改數據

sessionStorage.setItem('name', 'qianyin');sessionStorage.setItem('name', 'linheng');sessionStorage.setItem('user1', {name: 'qianyin'});sessionStorage.setItem('user2', JSON.stringify({name: 'qianyin'}));復制代碼

• 通過對象的形式添加、修改數據

sessionStorage.name = 'qianyin';sessionStorage.name = 'linheng';sessionStorage.user1 = {name: 'qianyin'};sessionStorage.user2 = JSON.stringify({name: 'qianyin'})復制代碼

• 通過瀏覽器(chrome)控制臺查看數據:

總結

以上是生活随笔為你收集整理的删除sessionstorage_localStorage 和 sessionStorage 介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。