数据本地存储方法封装（笔记）localStorage、sessionStorage

最新推荐文章于 2025-06-13 17:16:35 发布

翻译最新推荐文章于 2025-06-13 17:16:35 发布 · 486 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://github.com/ustbhuangyi/vue-sell

文章标签：

#vue

vue 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一种数据本地存储的方法封装，使用了good-storage库，实现了localStorage和sessionStorage的封装，提供了saveToLocal和loadFromLocal两个函数，用于存取特定ID下的数据。通过示例展示了如何在项目中应用这些函数。

数据本地存储方法封装（笔记）localStorage、sessionStorage

方法：

import storage from 'good-storage'

const SELLER_KEY = '__seller__'

export function saveToLocal(id, key, val) {
  const seller = storage.get(SELLER_KEY, {})
  if (!seller[id]) {
    seller[id] = {}
  }
  seller[id][key] = val
  storage.set(SELLER_KEY, seller)
}

export function loadFromLocal(id, key, def) {
  const seller = storage.get(SELLER_KEY, {})
  if (!seller[id]) {
    return def
  }
  return seller[id][key] || def
}

使用：

import { saveToLocal, loadFromLocal } from 'common/js/storage'

// 存值
this.favorite = loadFromLocal(this.seller.id, 'favorite', false)

// 取值
saveToLocal(this.seller.id, 'favorite', this.favorite)

备注：存储api

 import storage from 'good-storage'
 
 // localStorage
 storage.set(key,val) 
 
 storage.get(key, def)
 
 // sessionStorage
 storage.session.set(key, val)
 
 storage.session.get(key, val)

感谢黄轶老师。