English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Location
  2. Home page
  3. Experience notes
  4. Main text

Spiegazione dettagliata dell'uso di localstorage e sessionstorage in Vue

1. Several problems exposed in the use of the project

Everyone directly uses the native syntax like localStorage['aaa'] = 'This is a sample string' these, which has a high degree of coupling. If one day we need to change the implementation method or control the storage size, a lot of code needs to be modified

For a large project, the names of keys taken by everyone are bound to repeat, and this will also cause global pollution

Due to the irregular use of localStorage, it has caused waste of storage space and insufficient space

2. Solutions

Encapsulate the usage methods of storage, and handle them uniformly

Standardize the naming rules of storage key values
Standardize the usage specifications of storage

2.1. Encapsulate unified methods

Encapsulating into a method can reduce coupling, facilitate the switch of implementation methods, and control the size of the storage amount

The change of implementation can be realized by configuring different parameters

Edit the project structure as shown in the figure

Code implementation

/*
 * storage.js
 */
/*
 * @Author: 石国庆
 * @Desc: Encapsulation of local data storage methods
 * @Date: 14.11.2017
 * @Ref:
 *  https://github.com/WQTeam/web-storage-cache
 *  https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
 * @Spiegazione: Per evitare di creare nuovi oggetti, è necessario scrivere più volte
 * @Esempio:
 *
 * 1、Utilizzo di 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、Utilizzo di SessionStorage
 * storage.setItem('shiguoqing0',[1,2,3,4,5,6],{type:'session'})
 *
 * */
// TODO: implementazione di altri metodi
// TODO: impostazione del tempo di scadenza
/*
 * Implementazione del metodo
 * */
import local from './storage/localstorage.js'
import session from './storage/session.js'
import cookies from './storage/cookies.js'
import json from './storage/json.js'
/*
* Corpo della funzione
* */
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(){},
 // Ottieni lo spazio di archiviazione massimo: solo LocalStorage e SessionStorage possono utilizzare questo metodo
 getMaxSpace(options){
  let store=this.getStorage(options)
  store.getMaxSpace()
 },
 // Ottieni lo spazio utilizzato: solo LocalStorage e SessionStorage possono utilizzare questo metodo
 getUsedSpace(options){
  let store=this.getStorage(options)
  store.getUsedSpace()
 }
}
export default storage
// https://segmentfault.com/a/1190000002458488
// 5, esplora le chiavi memorizzate in localStorage
//  .length quantità totale dei dati, ad esempio: localStorage.length
//  .key(index) ottiene la chiave, ad esempio: var key=localStorage.key(index);
// Note: i dati memorizzati in localStorage non possono essere condivisi tra browser diversi, ogni browser può leggere solo i propri dati, con uno spazio di archiviazione di 5M.
// impostazione di scadenza
// 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
 * Implementazione di localstorage
 */
// Questo è un po' strano, il nome del file è local.js non può essere interpretato come file 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(){
  se (!window.localStorage) {
   console.log('Il browser attuale non supporta 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')
   }
    console.log(sum.length / 1024 + 'KB supera il limite massimo')
    clearInterval(show)
   }
  }, 0.1)
 },
 // Ottieni lo spazio di storage utilizzato da localstorage
 getUsedSpace(){
  se (!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')
   }
    console.log(sum.length / 1024 + 'KB supera il limite massimo')
    clearInterval(show)
   }
  }, 0.1)
 },
 // Ottieni lo spazio di storage utilizzato da localstorage
 getUsedSpace(){
  if (!window.sessionStorage) {
   console.log('Il browser non supporta sessionStorage')
  }
  var size = 0
  for (item in window.sessionStorage) {
   if (window.sessionStorage.hasOwnProperty(item)) {
    size += window.sessionStorage.getItem(item).length
   }
  }
  console.log('La capacità di utilizzo attuale di sessionStorage è di' + (size / 1024).toFixed(2) + 'KB')
 }
}
/*
 * cookies.js
 * L'implementazione di cooikes, probabilmente non ci sarà mai tempo per realizzarla in questa vita
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}
/*
 * json.js
 * L'implementazione di json, probabilmente non ci sarà mai tempo per realizzarla in questa vita
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

2.2. Utilizzo della规范azione dello spazio dei nomi

Per prevenire la contaminazione dei valori chiave, possiamo utilizzare uno spazio dei nomi in modo ragionevole

Possiamo definire uno spazio dei nomi, ma non possiamo memorizzare molti dati nello stesso oggetto, altrimenti la quantità di operazioni successive sarà troppo grande

ad esempio, il globale sotto global

ad esempio, aggiungere un suffisso di sistema a ciascun sistema funzionale

La规范azione del nome dello spazio dei nomi di un sistema dovrebbe essere progettata in anticipo, altrimenti molte persone non seguiranno le regole durante la sviluppo reale

Le cose utilizzate globalmente devono essere evidenziate nel documento README.md

Esempio

* localStorage['SGQ.global.userAuthor']: informazioni dell'utente di accesso sono qui, menu, organizzazione, gruppo
* localStorage['SGQ.global.systemName']: nome del sistema di accesso
* localStorage['SGQ.vuex.state']: indirizzo di archiviazione dello stato in vuex, che contiene tutte le cose
* localStorage['SGQ.wms.warehouse']: informazioni di magazzino necessarie per wms
+ localStorage['SGQ.wms.warehouse'].permissionId
+ localStorage['SGQ.wms.warehouse'].dataResource
* localStorage['SGQ.tms.org']: informazioni di rete necessarie per tms
+ localStorage['SGQ.tms.org'].permissionId
+ localStorage['SGQ.tms.org'].orgName

2.3. Norme di utilizzo di storage

2.3.1. Causa della generazione del problema

La causa di questo problema è che dobbiamo fare l'accesso con permessi, e durante l'accesso, è stato segnalato che lo spazio di archiviazione non è sufficiente. Dopo aver cercato la causa, è stato scoperto che il backend ha restituito tutti i dati di migliaia di super amministratori, il che non è sufficiente. Successivamente, è stato risolto il problema modificando il contenuto dei dati restituiti dall'interfaccia del backend.

Ma questo evento ci ha portato alcuni pensieri?

La capacità di localStorage e sessionStorage è di circa 5M in diversi browser

Il localStorage e il sessionStorage sono associati al dominio

Il localStorage archiviato sotto boss.hivescm.com è di 5M

Il localStorage archiviato sotto b2b.hivescm.com è anche di 5M

Anche se questo problema è stato risolto, dobbiamo stabilire un piano per sfruttare al massimo gli spazi di 10M di localStorage e sessionStorage sotto un dominio

2.3.2. Piano di utilizzo di storage

Le cose utilizzate globalmente, condivise e archiviate permanentemente devono essere conservate in localStorage

Ricorda di cancellare tempestivamente le cose che non devono essere archiviate permanentemente dopo l'uso

Se la quantità di dati è troppo grande, non archiviare localmente, ma ottenere dinamicamente

Puoi utilizzare Indexeddb con una capacità di archiviazione più grande, ma c'è un problema di compatibilità

Puoi limitare il numero di caratteri degli oggetti da memorizzare nel storage

Utilizza pienamente e logicamente le caratteristiche di H5 di sessionStorage e localStorage

Ad esempio: i dati della lista vengono memorizzati in Vuex e anche in localStorage

Ad esempio: alcuni dati di convalida del modulo utilizzano sessionStorage

3. Altri

3.1. Estensione

Da ciò si può dedurre che per la gestione degli eventi, è necessario pulire gli eventi non utilizzati quando si esce dal componente Vue

Ad esempio: per disinstallare l'evento con this.bus.$off('aa'), usa this.bus.$on('aa')

3.2. Ottieni la lunghezza del carattere

var len = 0
for (var i = 0; i < val.length; i++) {
 if (val[i].match(/[^\x00-\xff]/ig) != null) //Carattere bilancato
  len += 2 //Se un campo è di tipo text in MySQL, se l'encoding è impostato su utf-8, un carattere cinese occupa 3 byte, gbk 2 byte
 else
  len += 1 //Un carattere semi-bilancato occupa un byte
}
return len

Questo è tutto il contenuto che ho raccolto sull'uso di localStorage e sessionStorage in Vue, grazie per il tuo supporto al tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, il copyright spetta agli autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.

Manuale di base
Ti potrebbe interessare