تفسير استخدام localStorage و sessionstorage في Vue

1. بعض المشاكل التي تظهر أثناء الاستخدام

يستخدم الجميع مباشرة syntax مثل localStorage['aaa'] = 'هذا هو سلسلة مثال' باستخدام اللغة الأصلية، مما يؤدي إلى تشابك عالي جدًا، إذا كنا بحاجة إلى تغيير طريقة التنفيذ أو التحكم في حجم التخزين، فإن الكود الذي يجب تعديله سيكون كبيرًا

عندما يكون المشروع كبيرًا، فإن أسماء المفاتيح التي يختارها الجميع قد تكرر، مما يؤدي أيضًا إلى تلوث النظام العالمي

بسبب استخدام localStorage غير النظامي، تم إهدار مساحة التخزين واستخدامها بشكل غير كافٍ

2. الحل

تجميع طرق استخدام storage، معالجة الموحدة

تقديم قواعد التسمية للمعلمات الرئيسية لstorage
تقديم معايير استخدام storage

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 المخزنة
//  .length إجمالي الكمية البيانية، مثال: localStorage.length
//  .key(index) للحصول على المفتاح، مثال: var key=localStorage.key(index);
// ملاحظة: البيانات المخزنة في localStorage غير قابلة للاستخدام عبر المتصفحات المختلفة، يمكن لكل متصفح فقط قراءة بياناته الخاص به، مساحة التخزين 5M.
// إعداد التوقيت الإضافي
// function(st, key, value, expires) {
//  إذا (st == 'l') {}}
//   st = window.localStorage;
//   expires = expires || 60;
//  } else {
//   st = window.sessionStorage;
//   expires = expires || 5;
// }
//  إذا (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) || '{}');
//   إذا (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(){
  إذا (!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')
   }
    console.log(sum.length / 1024 + 'KB تجاوزت الحد الأقصى')
    clearInterval(show)
   }
  }, 0.1)
 },
 // الحصول على مساحة localStorage المستخدمة
 getUsedSpace(){
  إذا (!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 تجاوزت الحد الأقصى')
    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']: عنوان التخزين للـ state في vuex، فيه كل شيء
* 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. معايير استخدام storage

2.3.1. سبب ظهور المشكلة

سبب ظهور هذه المشكلة هو أننا نريد القيام بالدخول بتصريح، ثم عند الدخول، ظهرت مشكلة عدم كفاية مساحة التخزين، بعد البحث عن السبب، وجدنا أن الخادم أعاد جميع بيانات المديرين العشرات من السجلات، مما لم يكن كافيًا، وتم حل المشكلة لاحقًا بتعديل محتوى بيانات خادم الوجهة

لكن هذا الحدث أعطانا بعض النقاط للتفكير؟

مساحة تخزين localStorage وsessionstorage تختلف في المتصفحات المختلفة، وتكون تقريبًا 5M

مساحة تخزين localStorage وsessionstorage تأتي مع اسم النطاق

مساحة تخزين localStorage تحت نطاق boss.hivescm.com هي 5M

مساحة تخزين localStorage تحت نطاق b2b.hivescm.com هي 5M

حتى لو تم حل المشكلة هذه المرة، يجب أن نحدد خطة، لاستخدام كامل مساحة الـ 10M من localStorage وsessionstorage تحت نطاق اسم المجال

2.3.2. خطة استخدام storage

الأشياء التي تستخدمها عالميًا والأشياء المشتركة والأشياء التي يجب تخزينها دائمًا يتم تخزينها في localStorage

عند انتهاء الاستخدام من الأشياء التي لا تحتاج إلى التخزين الدائم، تذكر إزالتها في الوقت المناسب

إذا كانت كمية البيانات كبيرة، فلا تخزنها محليًا، بل استخرجها ديناميكيًا

يمكن استخدام Indexeddb ذو مساحة تخزين أكبر، ولكن هناك مشاكل التطابق

يمكن تحديد حد الحروف للمعلومات التي سيتم حفظها في storage في الخطة التطبيقية

استخدام خصائص H5 لـ sessionStorage وlocalStorage بشكل كامل ومشروع

على سبيل المثال: يتم حفظ بيانات القائمة في Vuex، والتي ستتم أيضًا حفظها في localStorage

على سبيل المثال: يتم استخدام بعض بيانات التحقق في sessionStorage

3. أخرى

3.1. التوسيع

من هنا يمكن التعميم على معالجة الحدث، يجب تنظيف الحدث غير المستخدم في وقت الخروج من مكون Vue

على سبيل المثال: يجب استخدام this.bus.$off('aa') لفصل هذا الحدث باستخدام this.bus.$on('aa')

3.2. الحصول على طول الأحرف

var len = 0
for (var i = 0; i < val.length; i++) {
 if (val[i].match(/[^\x00-\xff]/ig) != null) //كامل
  len += 2 //إذا كان ذلك كاملاً، فإنه يستخدم 2 كيلوبايت إذا كان هناك حقل نصي في mysql، وإذا كان الترميز هو utf-8، فإن كل صينية تستخدم 3 كيلوبايت، gbk يستخدم 2 كيلوبايت
 else
  len += 1 //يأخذ الإشارة المقدسة واحدة كيلوبايت
}
return len

هذا هو محتوى الكامل الذي جمعته المحرر حول استخدام localStorage وsessionstorage في Vue، شكرًا لدعمك لتعليمات النداء.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق للمالك الأصلي الحصول عليه، يتم جمع المحتوى من قبل المستخدمين عبر الإنترنت بطرق متفاوتة، هذا الموقع لا يملك حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم عن حقوق النسخ على الفور.