vue 使用 hx-storage 来进行本地存储

那颗星好美

于 2021-10-27 10:15:26 发布

阅读量273

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42767631/article/details/120987339

版权

vue 同时被 3 个专栏收录

17 篇文章

订阅专栏

javaScript

5 篇文章

订阅专栏

vue-cli3

1 篇文章

订阅专栏

博客介绍了如何在Vue项目中使用hx-storage库来解决localStorage只能存储字符串的问题，hx-storage支持存储对象、设置过期时间和提供多种配置选项。通过npm或yarn安装后，可以方便地进行数据的设置、获取、清除和过期设置，从而更灵活地管理前端本地存储数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 使用 hx-storage 来进行本地存储

前端js使用localStorage的时候只能存字符串,不能存储对象

hx-storage 可以存储 object , undefined , number , string

localStorage没有过期时间

hx-storage 可以设置以天为单位的过期时间

安装

npm i hx-storage

or

yarn add hx-storage

使用

import hxStorage from 'hx-storage';

// 设值
// set （<key>, value, options? = { expires: 0, encode: true }）
hxStorage.set('key', { name: "测试", age: 23 });

// 或者
// expires 过期时间, 单位是天, 默认为零，不设置
hxStorage.set('key', { name: "测试", age: 23 }, { expires: 1, encode: true }) // expires: 设置到期时间，1 代表一天， encode:  encodeURIComponent 进行编码，默认为开启，false为关闭

// 获取值
hxStorage.get('key')

// 清楚所有缓存
hxStorage.clear()

// 删除某个key
hxStorage.remove('key')


// 获取 storage 存储的数据
hxStorage.list();   // { ...data }

配置

import hxStorage from 'hx-storage'

// 配置
hxStorage.setOptions({
    namespace: 'KEY_',      // 设置全局名称前缀
    storage: 'local',       // 存储方式: local 永久存储 和 临时存储  session， 默认为 local
})


hxStorage.set('name', "bar");  // 存储为  { KEY_name : "bar" }

hxStorage.get('name')   // bar

End