Vue에서 로컬 저장소 및 세션 저장소를 사용하는 방법

이번에는 Vue에서 localstorage와 sessionstorage를 사용하는 방법을 알려드리겠습니다. Vue에서 localstorage와 sessionstorage를 사용할 때 notes란 무엇인가요?

1. 프로젝트 사용 중 여러 문제가 노출되었습니다

모두가 직접 localstorage['aaa']='This is example 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;
//   }
//  }
// }

e

/*
 * 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. 네임스페이스

사용 표준화 키값 오염을 방지하기 위해 네임스페이스를 합리적으로 사용할 수 있습니다

네임스페이스를 정의할 수 있지만 동일한 객체에 많은 데이터를 저장할 수 없으므로 후속 작업의 양이 너무 커질 것입니다

예를 들어 글로벌은 global

아래에 있습니다. 예를 들어, 각 기능 시스템에 시스템 접사를 추가하세요

시스템의 네임스페이스 사양은 미리 설계되어야 합니다. 그렇지 않으면 실제로 개발될 때 많은 사람들이 규칙을 따르지 않을 것입니다

전 세계적으로 사용되는 것들은 README.md 문서에 반영되어야 합니다

예

* 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. 저장소 사용량 사양

2.3.1. 문제의 원인

이 문제는 권한을 가지고 로그인을 해야 하는데, 로그인 시 계속 저장공간이 부족하다고 보고되기 때문에 발생합니다. 원인을 확인한 결과, 백엔드에서 수천 개의 슈퍼 관리형 데이터를 모두 반환한 것으로 확인되었습니다. 공간이 부족하여 나중에 이 문제를 해결하기 위해 백엔드 인터페이스에서 반환된 데이터 콘텐츠를 수정했습니다.

그런데 이 사건은 우리에게 무엇을 생각하게 만들었습니까?

로컬 저장소와 세션 저장소의 저장 용량은 기본적으로 다양한 브라우저에서 5M입니다

로컬 저장소와 세션 저장소의 저장은 도메인 이름을 따릅니다

boss.hivescm.com의 로컬 스토리지 용량은 5M

입니다. b2b.hivescm.com 아래의 로컬 스토리지도 5M

이번에 문제가 해결되더라도 하나의 도메인 이름으로 로컬 저장소와 세션 저장소의 총 10M 공간을 최대한 활용할 계획을 세워야 합니다

2.3.2. 스토리지 사용량 계획

전역적으로 사용되는 것, 공유되는 것, 영구적으로 저장되는 것들은 localstorage에 저장됩니다

사용 후에는 영구보관이 필요하지 않은 물건은 꼭 정리해주세요

데이터 양이 너무 많으면 로컬에 저장하지 말고 동적으로 가져오세요

더 큰 저장 용량으로 Indexeddb를 사용할 수 있지만 호환성 문제가 있습니다

구현 계획에서 저장소에 저장할 항목에 대한 단어 제한을 설정할 수 있습니다

세션 저장소 및 로컬 저장소

의 H5 기능을 최대한 활용하세요. 예: vuex에 저장된 목록 데이터는 실제로 localstorage

에 저장됩니다. 예: 양식 확인을 위한 일부 데이터는 sessionstorage

를 사용합니다. 3. 기타

3.1. 확장

이는 이벤트 처리로 추론할 수 있습니다. vue 구성 요소를 종료할 때 불필요한 이벤트를 정리해야 합니다

예: this.bus.$on('aa')는 이벤트를 언로드하려면 this.bus.$off('aa')를 사용해야 합니다

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怎么判断客户端类型

위 내용은 Vue에서 로컬 저장소 및 세션 저장소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!