So verwenden Sie Localstorage und Sessionstorage in Vue

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;
//   }
//  }
// }

/*
 * 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. 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

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 len

相信看了本文案例你已经掌握了方法，更多精彩请关注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!