JavaScript本地儲存實踐sessionStorage
目錄
背景簡介
HTML5中與本地儲存相關的兩個重要內容：Web Storage與本地資料庫。其中，Web Storage儲存機制是對HTML4中cookie儲存機制的一個改善。由於cookie儲存機制有很多缺點，HTML5不再使用它，轉而使用改良後的Web Storage儲存機制。本地資料庫是HTML5中新增的一個功能，使用它可以在客戶端本地建立一個數據庫，原本必須儲存在伺服器端資料庫中的內容現在可以直接儲存在客戶端本地了，這大大減輕了伺服器端的負擔，同時也加快了訪問資料的速度。
localStorage和sessionStorage均屬於Web Storage的一部分，屬於HTML5重新提供了一種在客戶端本地儲存資料的功能.
Web Storage又分為兩種：
1.sessionStorage：將資料儲存在session物件中。所謂session，是指使用者在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是使用者瀏覽這個網站所花費的時間。session物件可以用來儲存在這段時間內所要求儲存的任何資料。
2.localStorage：將資料儲存在客戶端本地的硬體裝置(通常指硬碟，也可以是其他硬體裝置)中，即使瀏覽器被關閉了，該資料仍然存在，下次開啟瀏覽器訪問網站時仍然可以繼續使用。
這兩者的區別在於，sessionStorage為臨時儲存，而localStorage為永久儲存。
PS:之前寫過有關localStorage方面的部落格：本地儲存實踐localStorage
sessionstorage與localStorage對比
| 區別點 | sessionStorage | localStorage |
| 儲存週期 | 臨時儲存 | 永久儲存 |
| 資料生命週期 | 頁面會話期間： 也就是說，在整個瀏覽器未關閉前，其資料一直都是存在的
|
除非主動刪除，否則一直有效 即使瀏覽器關閉了，下次開啟瀏覽器時仍然能夠讀取儲存的資料 |
| 是否瀏覽器維度儲存 | 是： 資料儲存是按不同的瀏覽器分別進行儲存的，也就是說，開啟別的瀏覽器是讀取不到在這個瀏覽器中儲存的資料的 |
是： 資料儲存是按不同的瀏覽器分別進行儲存的，也就是說，開啟別的瀏覽器是讀取不到在這個瀏覽器中儲存的資料的 |
| 基本使用 | sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的 | setItem (key, value) —— 儲存資料，以鍵值對的方式儲存資訊。 getItem (key) —— 獲取資料，將鍵值傳入，即可獲取到對應的value值。 removeItem (key) —— 刪除單個數據，根據鍵值移除對應的資訊。 clear () —— 刪除所有的資料 key (index) —— 獲取某個索引的key |
使用注意
- 頁面重新整理不會消除資料
- 只有在當前頁面開啟的連結，才可以訪sessionStorage的資料
例如：兩個頁面檔案，一個是index.html，另一個是text.html，在index.html中使用sessionStorage設定後：
1）直接開啟index.html頁面，獲取不到index.html中sessionStorage設定的值；
2）在index.html頁面，新增連結跳轉到text.html後，可以獲取到index.html中sessionStorage設定的值；
- 使用window.open開啟頁面和改變localtion.href方式都可以獲取到sessionStorage內部的資料
參考：https://blog.csdn.net/fcdd123/article/details/56286106/
使用場景
1）實際使用情況：
開啟控制檯可以看到各大網站都應用了 cookies 和 loacalStorage 的技術。卻很少看到 sessionStorage 的身影
2）使用 sessionStorage 進行頁面傳值
vue中sessionStorage.js封裝與使用
1、sessionStorage.js的封裝
/*
* sessionstorage.js
*/
export default {
getItem(key){
let item = sessionStorage.getItem(key)
// 這點要判斷是字串還是物件
let result = /^[{\[].*[}\]]$/g.test(item)
if (result) {
return JSON.parse(item)
} else {
return item
}
},
setItem(key, value){
// 這點要判斷是字串還是物件
if (typeof value == "string") {
sessionStorage.setItem(key, value)
} else {
let item = JSON.stringify(value)
sessionStorage.setItem(key, item)
}
},
removeItem(key){
sessionStorage.removeItem(key)
},
getAll(){},
clear(){
sessionStorage.clear()
},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){},
// 獲取localstorage最大儲存容量
getMaxSpace(){
if (!window.sessionStorage) {
console.log('當前瀏覽器不支援sessionStorage!')
}
var test = '0123456789'
var add = function (num) {
num += num
if (num.length == 10240) {
test = num
return
}
add(num)
}
add(test)
var sum = test
var show = setInterval(function () {
sum += test
try {
window.sessionStorage.removeItem('test')
window.sessionStorage.setItem('test', sum)
console.log(sum.length / 1024 + 'KB')
} catch (e) {
console.log(sum.length / 1024 + 'KB超出最大限制')
clearInterval(show)
}
}, 0.1)
},
// 獲取使用了的localstorage的空間
getUsedSpace(){
if (!window.sessionStorage) {
console.log('瀏覽器不支援sessionStorage')
}
var size = 0
for (item in window.sessionStorage) {
if (window.sessionStorage.hasOwnProperty(item)) {
size += window.sessionStorage.getItem(item).length
}
}
console.log('當前sessionStorage使用容量為' + (size / 1024).toFixed(2) + 'KB')
}
}2、vue其他頁面使用
//引用
import sessionstorage from '@src/util/sessionstorage';
//使用
sessionstorage.setItem('test1',[1,2,3,4,5,6])
sessionstorage.setItem('test2',{userId:'iiiiii',token:7788777})
sessionstorage.setItem('test3','dfdfdf')
console.log(sessionstorage.getItem('test1'))
console.log(sessionstorage.getItem('test2'))
console.log(sessionstorage.getItem('test3'))