Dieses Mal zeige ich Ihnen, wie Sie Localstorage und SessionStorage in Vue verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von Localstorage und Sessionstorage in Vue? Stehen Sie auf und schauen Sie nach.
1. Mehrere Probleme, die während der Nutzung des Projekts aufgedeckt wurden
Jeder verwendet direkt localstorage['aaa']='This is an examplestring' und andere native Syntaximplementierungen. Wenn wir eines Tages die Implementierungsmethode ändern oder die Speichergröße anpassen müssen Wenn Sie eine gewisse Kontrolle vornehmen, muss eine Menge Code geändert werden
Wenn das Projekt sehr groß ist, werden die Namen der Schlüssel zwangsläufig wiederholt, was auch zu einer globalen Umweltverschmutzung führt
Da die Nutzung von Localstorage nicht standardisiert ist, führt dies zu Verschwendung und unzureichendem Lagerraum
2. Lösung
Wie man gekapselten Speicher nutzt und einheitlich damit umgeht
Standardisieren Sie die Benennungsregeln für Speicherschlüsselwerte
Standardisieren Sie die Speichernutzung
2.1. Einheitliche Kapselungsmethode
Durch die Kapselung der Methode kann der Kopplungsgrad verringert, der Wechsel von Implementierungsmethoden erleichtert und die Speichergröße gesteuert werden
Eine Änderung der Implementierung kann durch die Konfiguration verschiedener Parameter
erreicht werden
Bearbeiten Sie die Projektstruktur wie im Bild gezeigt
Code-Implementierung
/*
* 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;
// }
// }
// }Nach dem Login kopieren
/*
* 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')
}
}Nach dem Login kopieren
/*
* 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')
}
}Nach dem Login kopieren
/*
* cookies.js
* cooikes的实现，这辈子估计没有时间实现了
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}Nach dem Login kopieren
/*
* json.js
* json的实现，这辈子估计也没有时间实现了
*/
export default {
getItem(key){},
setItem(key, value){},
removeItem(key){},
getAll(){},
clear(){},
key(n){},
forEach(cb){},
has(key){},
deleteAllExpires(){}
}Nach dem Login kopieren
2.2. Standardisieren Sie die Verwendung des Namespace
Um die Verschmutzung von Schlüsselwerten zu verhindern, können wir den Namespace
sinnvoll verwenden
Wir können einen Namespace definieren, aber wir können nicht viele Daten im selben Objekt speichern, sodass die Anzahl der nachfolgenden Vorgänge zu groß ist
Die globale befindet sich beispielsweise unter global
Fügen Sie beispielsweise jedem funktionalen System den Systemzusatz
hinzu
Die Namespace-Spezifikation eines Systems sollte im Voraus entworfen werden, da sich sonst viele Menschen bei der tatsächlichen Entwicklung nicht an die Regeln halten
Global verwendete Dinge sollten im README.md-Dokument
widergespiegelt werden
Beispiel
* 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
Nach dem Login kopieren
2.3. Spezifikationen zur Speichernutzung
2.3.1. Ursache des Problems
Dieses Problem entsteht, weil wir uns mit Berechtigungen anmelden müssen und dann beim Anmelden immer wieder gemeldet wird, dass nicht genügend Speicherplatz vorhanden ist. Nachdem wir den Grund überprüft haben, haben wir festgestellt, dass das Backend alle tausend superverwalteten Daten zurückgegeben hat Es war nicht genügend Speicherplatz vorhanden und der von der Backend-Schnittstelle zurückgegebene Dateninhalt wurde später geändert, um dieses Problem zu lösen.
Aber worüber hat uns dieser Vorfall zum Nachdenken gebracht?
Die Speicherkapazität von Localstorage und Sessionstorage beträgt in verschiedenen Browsern grundsätzlich 5 MB
Die Speicherung von Localstorage und Sessionstorage folgt dem Domänennamen
Der lokale Speicher unter boss.hivescm.com beträgt 5M
Der lokale Speicher unter b2b.hivescm.com beträgt ebenfalls 5M
Selbst wenn das Problem dieses Mal gelöst wird, sollten wir einen Plan erstellen, um den gesamten 10 Millionen Speicherplatz von Localstorage und Sessionstorage unter einem Domainnamen voll auszunutzen
2.3.2. Speichernutzungsplan
Global genutzte, geteilte und dauerhaft gespeicherte Dinge werden im lokalen Speicher
gespeichert
Denken Sie daran, Dinge, die nicht dauerhaft aufbewahrt werden müssen, nach Gebrauch wegzuräumen
Wenn die Datenmenge zu groß ist, speichern Sie sie nicht lokal und beziehen Sie sie dynamisch
Sie können Indexeddb mit größerer Speicherkapazität verwenden, es gibt jedoch Kompatibilitätsprobleme
Sie können die Anzahl der im Speicher zu speichernden Wörter im Implementierungsplan begrenzen
Nutzen Sie die H5-Funktionen von Sessionstorage und Localstorage vollständig und angemessen
Beispiel: In Vuex gespeicherte Listendaten werden tatsächlich im lokalen Speicher
gespeichert
Beispiel: Einige Daten zur Formularüberprüfung verwenden Sessionstorage
3. Andere
3.1. Erweiterung
Dies lässt sich auf die Verarbeitung von Ereignissen zurückführen, die beim Beenden der Vue-Komponente rechtzeitig bereinigt werden sollten
Beispiel: this.bus.$on('aa') sollte this.bus.$off('aa') verwenden, um das Ereignis
zu entladen
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 lenNach dem Login kopieren
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Angular操作table表格使其排序
JS怎么判断客户端类型
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Localstorage und Sessionstorage in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
