一、 簡述

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

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

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

二、 相同點

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

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

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

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

三、 不同點

3.1 生命周期

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

3.2 作用域

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

四、 操作

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

4.1 新增、修改

• 通過 setItem 添加、修改數(shù)據(jù)

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

• 通過對象的形式添加、修改數(shù)據(jù)

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。