這篇文章主要介紹了詳解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
##例如:表單校驗的一些資料都用 sessionstorage3. 其他
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上面是我整理給大家的,希望今後會對大家有幫助。 相關文章: ####在Angular4.0中如何使用laydate.js日期外掛程式####### #####在JS中如何實作標籤滾動切換######
以上是在Vue中有關於localstorage和sessionstorage如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!