點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

在Vue中有關于localstorage和sessionstorage如何使用

來源：懂視網責編：小OO 時間：2020-11-27 19:36:32

在Vue中有關于localstorage和sessionstorage如何使用

1.項目使用中暴露出來的幾個問題。大家到處直接使用localstorage['；aaa'；]='；這是一段示例字符串'；這些原生語法實現，這樣耦合度太高了，假如有一天我們需要換實現方式，或者對存儲大小做一些控制，那么需要修改的代碼就會很多。項目很大，那么大家起的key的名字難免會重復，而且這樣也會造成全局污染。因為localstorage的使用不規范，所以造成了存儲空間的浪費和不夠用。2.解決辦法；封裝storage的使用方法，統一處理。規范storage的key值的命名規則。規范storage的使用規范。2.1.封裝統一的方法。封裝成方法可以降低耦合度，可以方便切換實現方式，可以控制存儲量大小。改變實現可以通過配置不同的參數來實現。編輯如圖所示的項目結構。

推薦度：

點擊下載本文 文檔為doc格式

導讀1.項目使用中暴露出來的幾個問題。大家到處直接使用localstorage['；aaa'；]='；這是一段示例字符串'；這些原生語法實現，這樣耦合度太高了，假如有一天我們需要換實現方式，或者對存儲大小做一些控制，那么需要修改的代碼就會很多。項目很大，那么大家起的key的名字難免會重復，而且這樣也會造成全局污染。因為localstorage的使用不規范，所以造成了存儲空間的浪費和不夠用。2.解決辦法；封裝storage的使用方法，統一處理。規范storage的key值的命名規則。規范storage的使用規范。2.1.封裝統一的方法。封裝成方法可以降低耦合度，可以方便切換實現方式，可以控制存儲量大小。改變實現可以通過配置不同的參數來實現。編輯如圖所示的項目結構。

這篇文章主要介紹了詳解Vue中localstorage和sessionstorage的使用方法和經驗心得，有需要的朋友跟著小編參考學習下吧。

1. 項目使用中暴露出來的幾個問題

大家到處直接使用localstorage['aaa']='這是一段示例字符串'這些原生語法實現，這樣耦合度太高了，假如有一天我們需要換實現方式，或者對存儲大小做一些控制，那么需要修改的代碼就會很多

項目很大，那么大家起的key的名字難免會重復，而且這樣也會造成全局污染

因為localstorage的使用不規范，所以造成了存儲空間的浪費和不夠用

2. 解決辦法

封裝storage的使用方法，統一處理

規范storage的key值的命名規則
規范storage的使用規范

2.1. 封裝統一的方法

封裝成方法可以降低耦合度，可以方便切換實現方式，可以控制存儲量大小

改變實現可以通過配置不同的參數來實現

編輯如圖所示的項目結構

代碼實現

/*
 * storage.js
 */
/*
 * @Author: 石國慶
 * @Desc: 本地數據存儲方法封裝
 * @Date: 2017.11.14
 * @Ref:
 * https://github.com/WQTeam/web-storage-cache
 * https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
 * @Explain:為了不new對象，只能多寫幾遍
 * @Example:
 *
 * 1、LocalStorage的使用
 * import storage from '@/utils/storage.js'
 * storage.setItem('shiguoqing0',[1,2,3,4,5,6])
 * storage.setItem('shiguoqing1',{userId:'dfdf',token:11232323})
 * storage.setItem('shiguoqing2','dfdfdf')
 * console.log(storage.getItem('shiguoqing0'))
 * console.log(storage.getItem('shiguoqing1'))
 * console.log(storage.getItem('shiguoqing2'))
 * storage.removeItem('shiguoqing2')
 *
 *
 * 2、SessionStorage的使用
 * storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
 *
 * */
// TODO:其他方法的實現
// TODO:超時時間的設置
/*
 * 方法實現
 * */
import local from './storage/localstorage.js'
import session from './storage/session.js'
import cookies from './storage/cookies.js'
import json from './storage/json.js'
/*
* 函數體
* */
let storage= {
 config:{
 type:'local',// local,session,cookies,json
 expires:new Date().getTime() + 100 * 24 * 60 * 60 * 1000
 },
 getStorage(options){
 let config={}
 if(options){
 config=Object.assign({},this.config,options)
 }else{
 config=this.config
 }
 return this.createStorage(config.type)
 },
 createStorage(name){
 switch(name){
 case 'local':return local;break
 case 'session':return session;break
 case 'cookies':return cookies;break
 case 'json':return json;break
 }
 },
 getItem(key,options){
 let store=this.getStorage(options)
 return store.getItem(key)
 },
 setItem(key, value,options){
 let store=this.getStorage(options)
 store.setItem(key,value)
 },
 removeItem(key,options){
 let store=this.getStorage(options)
 store.removeItem(key)
 },
 getAll(){},
 clear(options){
 let store=this.getStorage(options)
 store.clear()
 },
 key(n){},
 lenght(){},
 has(key){},
 forEach(cb){},
 deleteAllExpires(){},
 // 獲取最大存儲空間：只有LocalStorage和SessionStorage可以使用這個方法
 getMaxSpace(options){
 let store=this.getStorage(options)
 store.getMaxSpace()
 },
 // 獲取使用了的空間：只有LocalStorage和SessionStorage可以使用這個方法
 getUsedSpace(options){
 let store=this.getStorage(options)
 store.getUsedSpace()
 }
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5、遍歷localStorage存儲的key
// .length 數據總量，例：localStorage.length
// .key(index) 獲取key，例：var key=localStorage.key(index);
// 備注：localStorage存數的數據是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數據,儲存空間5M。
// 超時設置
// function(st, key, value, expires) {
// if (st == 'l') {
// st = window.localStorage;
// expires = expires || 60;
// } else {
// st = window.sessionStorage;
// expires = expires || 5;
// }
// if (typeof value != 'undefined') {
// try {
// return st.setItem(key, JSON.stringify({
// data: value,
// expires: new Date().getTime() + expires * 1000 * 60
// }));
// } catch (e) {}
// } else {
// var result = JSON.parse(st.getItem(key) || '{}');
// if (result && new Date().getTime() < result.expires) {
// return result.data;
// } else {
// st.removeItem(key);
// return null;
// }
// }
// }

/*
 * localstorage.js
 * localstorage的實現
 */
// 這個有點奇怪,文件名稱叫local.js不能按照js文件解析
export default {
 getItem(key){
 let item = localStorage.getItem(key)
 // 這點要判斷是字符串還是對象
 let result = /^[{\[].*[}\]]$/g.test(item)
 if (result) {
 return JSON.parse(item)
 } else {
 return item
 }
 },
 setItem(key, value){
 // 這點要判斷是字符串還是對象
 if (typeof value == "string") {
 localStorage.setItem(key, value)
 } else {
 let item = JSON.stringify(value)
 localStorage.setItem(key, item)
 }
 },
 removeItem(key){
 localStorage.removeItem(key)
 },
 getAll(){},
 clear(){
 localStorage.clear()
 },
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){},
 // 獲取localstorage最大存儲容量
 getMaxSpace(){
 if (!window.localStorage) {
 console.log('當前瀏覽器不支持localStorage!')
 }
 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.localStorage.removeItem('test')
 window.localStorage.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.localStorage) {
 console.log('瀏覽器不支持localStorage')
 }
 var size = 0
 for (item in window.localStorage) {
 if (window.localStorage.hasOwnProperty(item)) {
 size += window.localStorage.getItem(item).length
 }
 }
 console.log('當前localStorage使用容量為' + (size / 1024).toFixed(2) + 'KB')
 }
}

/*
 * session.js
 * sessionstorage的實現
 */
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')
 }
}

/*
 * cookies.js
 * cooikes的實現，這輩子估計沒有時間實現了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

/*
 * json.js
 * json的實現，這輩子估計也沒有時間實現了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

2.2. 規范命名空間的使用

為了防止key值污染,我們可以合理使用命名空間

我們可以定義命名空間，但是不能把很多數據存儲在同一對象里面，這樣后面的操作量會太大

比如全局的在global下面

比如各功能系統的加上系統詞綴

一個系統的命名空間規范應該提前設計好，否則真正開發起來會有很多人不按照規則使用

全局使用的東西要在README.md文檔中體現出來

示例

* localStorage['SGQ.global.userAuthor']：登錄的用戶信息都在這里,菜單,組織，集團
* localStorage['SGQ.global.systemName']：登錄的系統名稱
* localStorage['SGQ.vuex.state']:vuex中的state的存儲地址，這里面有所有的的東西
* localStorage['SGQ.wms.warehouse']:wms需要的倉庫信息
+ localStorage['SGQ.wms.warehouse'].permissionId
+ localStorage['SGQ.wms.warehouse'].dataResource
* localStorage['SGQ.tms.org']:tms需要的網點的信息
+ localStorage['SGQ.tms.org'].permissionId
+ localStorage['SGQ.tms.org'].orgName

2.3. storage使用規范

2.3.1. 問題產生的原因

這個問題的產生是因為我們要做權限登錄，然后登錄的時候一直報存儲空間不夠的問題，查了原因發現是后端把所有的超管的幾千條數據都返回來了，以至于不夠用，后來修改了后端接口返回的數據內容解決了這個問題。

但是這次的事給我們帶來了幾點思考？

localstorage和sessionstorage的存儲量在不同的瀏覽器中基本是5M

localstorage和sessionstorage的存儲是跟著域名來的

boss.hivescm.com下localstorage存儲是5M

b2b.hivescm.com下localstorage存儲也是5M

即使這次問題解決了，但是我們應該定一套方案，充分利用一個域名下，localstorage和sessionstorage的共10M空間

2.3.2. storage使用方案

全局使用的東西，共享的東西，永久存儲的東西儲存在localstorage中

不需要永久存儲的東西在使用完畢之后要記得及時清除

如果數據量過大就不要存儲在本地了，變為動態獲取

可以使用存儲量更大的Indexeddb，不過有兼容性問題

可以在實現方案中對要存儲到storage中的東西做字數限制

充分合理利用sessionstorage和localstorage的H5特性

例如：列表數據存儲在vuex中其實也會存到localstorage

例如：表單校驗的一些數據都用sessionstorage

3. 其他

3.1. 延伸擴展

由此可以類推到事件的處理，沒用的事件要及時在退出vue組件的時候清理掉

例如：this.bus.$on('aa')要用this.bus.$off('aa')卸載事件

3.2. 字符長短獲取

var len = 0
for (var i = 0; i < val.length; i++) {
 if (val[i].match(/[^\x00-\xff]/ig) != null) //全角
 len += 2 //如果是全角，占用兩個字節 如果mysql中某字段是text, 如果設置編碼為utf-8,那么一個中文是占3個字節, gbk是兩個字節
 else
 len += 1 //半角占用一個字節
}
return len

上面是我整理給大家的，希望今后會對大家有幫助。

Web表單的JS插件（精品推薦）

在jQuery中如何實現在線客服功能

在jQuery中如何實現向列表動態添加

在Webpack中有關優化配置問題

在Webpack中如何構建Electron應用

使用Angular4有關圖片路徑不安全的問題

在JS中如何實現十字坐標跟隨鼠標效果

在jQuery中如何使用EasyUI window窗口

在Angular4.0中如何使用laydate.js日期插件

在JS中如何實現標簽滾動切換

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com