如何优雅的使用localStorage等本地化存储

locstore

戳我跳转gitee

locstore是一个轻量级的JavaScript库，提供了简洁而强大的本地存储管理功能。通过locstore，开发者可以轻松地存储、检索和管理数据在用户的浏览器中，无论是长期存储还是短期会话存储。locstore提供了一组丰富的API，允许您以简单的方式操作数据，包括设置、获取、删除等操作。它还提供了数据加密功能，以确保数据的安全性和高效存储。locstore是一个高效、可靠、易于使用的本地存储解决方案，可以帮助您更好地管理和利用数据，提升用户体验和应用程序性能。
locstore集成了TypeScript,让您在TypeScript解决方案中得心应手。
无论您是构建Web应用程序还是构建离线应用程序，locstore都是您不可或缺的存储管理工具。

---

安装🚀

npm install locstore --save
yarn add locstore --save
pnpm add locstore --save

导入

import locStore from 'locstore'

项目中使用

1. 默认 存储及获取

// js存储键 默认为localStorage
locStore.set("name", "张三");

// js获取键, 默认为localStorage
const name = locStore.get("name");

// ts存储方法同上
// ts获取键
const name = locStore.get<string>("name");

注意：set, get中默认调取localStorage实例，如果需要手动指定sessionStorage 或 cookie，请继续往下看 👇

2. 指定存储及获取 类型

// 0. 安装
import locStore, { StoreType } from "locstore"

// 1. 指定存储类型为sessionStorage
locStore.set("name", "张三", { storage: StoreType.SEEEIONSTORAGE });
locStore.get("name", { storage: StoreType.SEEEIONSTORAGE })

// 2. 指定存储类型为localStorage, **可忽略不写**，因为默认类型为localStorage
locStore.set("name", "张三", { storage: StoreType.LOCALSTORAGE});
locStore.get("name", { storage: StoreType.LOCALSTORAGE })

// 3. cookie
locStore.set("name", "张三", { storage: StoreType.COOKIE });
locStore.get("name", { storage: StoreType.COOKIE })

3. 设置过期时间

过期时间根据dayjs时间转换，locstore中已经内置，项目中可以不安装，
TimeSpan类为内置的，该类提供了一下几个方法
TimeSpan.Now(): Dayjs or TimeSpan.Today(): Dayjs // 获取当天时间
TimeSpan.Ticks(): number// 获取当前时间的时间戳
TimeSpan.FromDays(num: number): Dayjs 获取指定天数的后的日期
TimeSpan.FromHours(num: number): Dayjs 获取指定小时数的后的日期
TimeSpan.FromMinutes(num: number): Dayjs 获取指定分钟数的后的日期
TimeSpan.FromMilliseconds(num: number): Dayjs 获取指定毫秒数的后的日期
TimeSpan.FromSeconds(num: number): Dayjs 获取指定秒数的后的日期

// 0. 安装
import locStore, { TimeSpan } from "locstore";

// 1. 使用，
locStore.set("name", "张三", { expires: TimeSpan.FromDays(2) }); // 表示该缓存两天后过期

4. 缓存加密

注意，加密后获取时需要解密，否则提示解析失败

// 0. 安装
import locStore from "locstore";

// 1. 使用
locStore.set("name", "张三", { encrypt: true });

// 2. 获取
locStore.get("name", { decrypt: true });

5. 案例

// 0. 安装
import locStore, { TimeSpan, StoreType } from "locstore";

// 1.从sessionStore加密存储一个对象并获取，过期时间为两天
const student = {
	name: "张三",
	age: 18,
	gender: "男"
}

// 此处无须序列化，即无需 JSON.stringify(student), locStore出现的目的就是解放双手
locStore.set("student", student, { storage: StoreType.SESSIONSTORAGE, expires: TimeSpan.FromDays(2), encrypt: true  })
locStore.get("student", { decrypt: true })

// ts 获取键
// 定义类型
type StudentType = {
	name: string;
	age: number;
	gender: string;
}
const studentInfo = locStore.get<StudentType>("student", { decrypt: true });
console.log(studentInfo.name);
//...

---

🤣🤣🤣 戳我跳转gitee，如果确实为您提供了方便，提前感谢您的小星星~~🤣🤣🤣

locstore为平时用ts编写代码时秉着能懒则懒，一劳永逸的心态而写。如果你也和我一样懒…，如果您在使用过程中有任何问题或有新增及修改建议请随时联系！~~~~~