這次帶給大家localstorage和sessionstorage在Vue中怎麼使用，localstorage和sessionstorage在Vue中使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
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相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是localstorage和sessionstorage在Vue中怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
