So verwenden Sie Localstorage und Sessionstorage in Vue

Dieser Artikel stellt hauptsächlich die detaillierte Verwendung und Erfahrung von Localstorage und Sessionstorage in Vue vor. Freunde in Not können dem Herausgeber als Referenz und Studium folgen.

1. Mehrere Probleme bei der Verwendung des Projekts

Jeder verwendet direkt localstorage['aaa']='This is a example string' diese native Syntax-Implementierung , dieser Kopplungsgrad ist zu hoch. Wenn wir eines Tages die Implementierungsmethode ändern oder die Speichergröße steuern müssen, muss viel Code geändert werden

Das Projekt ist Sehr groß, daher muss jeder mit dem Schlüssel beginnen. Der Name wird unweigerlich wiederholt, was auch zu globaler Umweltverschmutzung führt

Da die Verwendung von Localstorage nicht standardisiert ist, führt dies zu Verschwendung und unzureichendem Speicherplatz

2. Lösung

Kapseln Sie die Speichernutzung und handhaben Sie sie einheitlich

Standardisieren Sie die Benennungsregeln für den Schlüsselwert des Speichers
Standardisieren Sie die Nutzung Speicherkapazität

2.1. Kapseln Sie die einheitliche Methode

Die Kapselung in Methoden kann den Kopplungsgrad verringern, den Wechsel von Implementierungsmethoden erleichtern und die Speichergröße steuern

Ändern der Implementierung kann durch die Konfiguration verschiedener Parameter erreicht werden

Bearbeiten Sie die gezeigte Projektstruktur

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 von Namespaces

In der Reihenfolge Um die Verschmutzung von Schlüsselwerten zu verhindern, können wir Namespaces 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

Zum Beispiel ist das Globale unter global

Zum Beispiel das Hinzufügen von Systemzusätzen für jedes funktionale System

Die Namespace-Spezifikation eines Systems sollte im Voraus entworfen werden, sonst werden es viele Leute tun Verwenden Sie es, ohne die Regeln während der tatsächlichen Entwicklung zu befolgen

Dinge, die global verwendet werden, müssen im README.md-Dokument wiedergegeben werden. Kommen Sie heraus

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 Speichernutzungsspezifikationen

2.3.1. Ursache des Problems

Dieses Problem tritt auf, weil wir Berechtigungen erteilen müssen. Nach dem Anmelden erhielt ich immer wieder Meldungen über unzureichenden Speicherplatz. Nachdem ich den Grund überprüft hatte, stellte ich fest, dass das Backend Ich habe alle Tausenden von superverwalteten Daten zurückgegeben, was nicht ausreichte. Später habe ich die von der Backend-Schnittstelle zurückgegebenen Daten 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 5M

Der Speicher von Localstorage und Sessionstorage folgt dem Domänennamen

localstorage unter boss.hivescm.com Der Speicher ist 5M

Der lokale Speicher unter b2b.hivescm.com ist ebenfalls 5M

Auch wenn das Problem dieses Mal gelöst ist, sollten wir einen Plan erstellen, um Localstorage und Sessionstorage unter einem vollständig zu nutzen Domänenname. Insgesamt 10 Mio. Speicherplatz

2.3.2. Speichernutzungsplan

Dinge, die global genutzt, geteilt und dauerhaft gespeichert werden, werden im lokalen Speicher gespeichert

Es ist kein dauerhafter Speicher erforderlich Denken Sie daran, die Dinge rechtzeitig nach der Verwendung zu löschen

Wenn die Datenmenge zu groß ist, speichern Sie sie nicht lokal und ändern Sie sie auf dynamische Erfassung

Sie können Indexeddb mit größerer Speicherkapazität verwenden, aber Es liegt ein Kompatibilitätsproblem vor

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

Zum Beispiel: Listendaten werden tatsächlich in Localstorage gespeichert

Zum Beispiel: Einige Daten zur Formularüberprüfung verwenden Sessionstorage

3 >

3.1. Erweiterung

Dies lässt sich auf die Verarbeitung nutzloser Ereignisse beim Beenden der Vue-Komponente zurückführen.

Zum Beispiel: .bus.$on('aa') sollte für dieses.bus.$off('aa')-Deinstallationsereignis verwendet werden

3.2. Zeichenlängenerfassung

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

Das Obige habe ich zusammengestellt für alle. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

JS-Plug-in für Webformulare (hochwertige Empfehlung)

So implementieren Sie die Online-Kundendienstfunktion in jQuery

So fügen Sie dynamisch zur Liste in jQuery hinzu

Informationen zu Optimierungskonfigurationsproblemen in Webpack

In So erstellen Sie eine Electron-Anwendung in Webpack

Probleme mit unsicheren Bildpfaden mit Angular4

So implementieren Sie die Kreuzkoordinatenverfolgung Mauseffekt in JS

So verwenden Sie das EasyUI-Fenster in jQuery

So verwenden Sie das Datums-Plug-in vonlaydate.js in Angular4.0

So implementieren Sie den Label-Scrolling-Wechsel in 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!