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 = 0for (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以上就是小編整理的關于Vue中localstorage和sessionstorage的用法的全部內容，感謝你對武林網的支持。
新聞熱點
疑難解答
