Vue で localstorage と sessionstorage を使用する方法

この記事では主に、Vue での localstorage と sessionstorage の詳細な使用法と経験を紹介します。必要な友人は、参照と学習のためにエディターをフォローできます。

1. プロジェクトの使用中に明らかになったいくつかの問題

誰もが localstorage['aaa']='This is a sample string' と他のネイティブ構文の実装を使用している場合、この結合は高すぎます。実装方法を変更したり、ストレージ サイズを制御したりする必要がある日には、修正が必要なコードが大量に発生します

プロジェクトが大きいため、全員が付けたキー名は必然的に重複します。これは地球規模の汚染の原因にもなります

ローカルストレージの使用が標準化されていないため、無駄が生じ、ストレージ容量が不足します

2. 解決策

ストレージの使用状況をカプセル化して均一に処理します

ストレージの命名規則を標準化しますキーの値
ストレージの使用を標準化する

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')
 }
}

rreeerrree

/*
 * 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')
 }
}

2.2. 名前空間の使用を標準化します

キー値の汚染を防ぐために、合理的に名前空間を使用できます

名前空間を定義することはできますが、同じオブジェクトに大量のデータを格納することはできないので、後から操作量が膨大になります

例えば、グローバルなものはglobalの下にあります

例えば、各機能システムはシステムアフィックスで追加されます

名前空間システムの仕様は事前に設計しておかないと、実際に開発する際にルール通りに使えない人が多くなります

グローバルで使用するものはREADME.mdドキュメントに反映する必要があります

Example

/*
 * cookies.js
 * cooikes的实现，这辈子估计没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

2.3。使用仕様

2.3.1. 問題の原因

この問題は、アクセス許可を使用してログインする必要があるために発生します。その後、原因を確認したところ、ストレージ容量が不足していることがわかりました。バックエンドは何千ものスーパーマネージド データをすべて返しましたが、これでは不十分でした。その後、この問題を解決するためにバックエンド インターフェイスから返されたデータの内容を変更しました。

しかし、この出来事は私たちにどのような考えをもたらしたでしょうか？

localstorageとsessionstorageのストレージ容量は、異なるブラウザでは基本的に5Mです

localstorageとsessionstorageのストレージはドメイン名に従います

boss.hivescm.comの下のlocalstorageストレージは5Mです

b2b.hivescm.comの下のlocalstorageストレージも5Mです

今回問題が解決したとしても、1つのドメイン名の下でlocalstorageとsessionstorageの合計10Mのスペースを最大限に活用する計画を立てる必要があります

2.3.2 ストレージ使用計画

グローバルで使用されるもの永続的に保存されるものはローカルストレージに保存されます

永続的に保存する必要のないものは、使用後に時間内に消去する必要があります

データの量が大きすぎる場合は、ローカルに保存せずに動的ストレージに変更してください取得

より大容量のストレージIndexeddbを使用できますが、互換性の問題があります

実装計画でストレージに保存するワード数を制限できます

sessionstorageとlocalstorageのH5機能を最大限に活用してください

例: リストデータは vuex に保存されます。実際には、ローカルストレージにも保存されます

例: フォーム検証の一部のデータはセッションストレージ

3 を使用します。その他

3.1 これは推測できます。不要なイベントはタイムリーに処理する必要があります。vue コンポーネントを終了するときにクリーンアップします

例: this.bus.$on('aa') は this.bus.$off( 'aa') イベントをアンロードします

3.2. 文字の長さを取得します

/*
 * json.js
 * json的实现，这辈子估计也没有时间实现了
 */
export default {
 getItem(key){},
 setItem(key, value){},
 removeItem(key){},
 getAll(){},
 clear(){},
 key(n){},
 forEach(cb){},
 has(key){},
 deleteAllExpires(){}
}

上記は私が皆さんのためにまとめたものです。今後皆さんのお役に立てれば幸いです。

関連記事:

Webフォーム用JSプラグイン(高品質推奨)

jQueryでオンライン接客機能を実装する方法

jQueryでリストに動的に追加する方法

Webpackに関連する構成の問題の最適化

WebpackでElectronアプリケーションを構築する方法

Angular4を使用した安全でない画像パスに関する問題

JSでマウスエフェクトに続くクロス座標を実装する方法

方法jQuery EasyUIウィンドウで使用します

Angular4.0でlaydate.js日付プラグインを使用する方法

JSでラベルスクロール切り替えを実装する方法

以上がVue で localstorage と sessionstorage を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。