npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

web-storage-plus

v2.0.0

Published

Enhanced localStorage and sessionStorage, support expiration time, encrypt/decrypt, async, namespace, More data types than JSON.stringify, etc.(增强本地/会话存储,支持过期时间、异步、加解密函数、命名空间、比JSON.stringify方法支持更多的数据类型)

Downloads

30

Readme

web-storage-plus

增强浏览器的localStorage和sessionStorage API,支持设置过期时间、命名空间、异步/同步、自定义json化与解析函数、加解密函数。
提供stringify/parse函数,相比JSON.stringify/JSON.parse方法,额外支持了function、regexp、date、undefined、NaN、Infinity、-Infinity、bigint。
提供encode/decode函数,用于将字符串转换为base64编码或将base64编码转换为字符串,安全性要求不高时可用来加密,安全性要求较高时,推荐使用您自己编写的加解密函数。
以上函数都是可选的,如果您不需要,可以不用引入。

安装

$ npm install web-storage-plus

$ yarn add web-storage-plus

$ pnpm add web-storage-plus

示例

基础使用

import { setStorage, getStorage, setStorageAsync, getStorageAsync } from 'web-storage-plus'

const data = { name: 'test', data: 'this is a test.' }

setStorage('storage', data)
getStorage<{ name: string; data: string; }>('storage') // { name: 'test', data: 'this is a test.' }

setStorageAsync('test', data).then(() => {
  console.log('setStorage success.');
});
getStorageAsync('test').then((data) => {
  console.log('getStorage success.', data);
});

进阶使用

import { setStorage, getStorage, setGlobalPrefix, stringify, parse, encode, decode } from 'web-storage-plus'

setGlobalPrefix('test_')

const data = { name: 'test', data: 'this is a test.' }

setStorage('storage', data, {
  maxAge: 60 * 60 * 24,
  stringifyFn: stringify,
  encryptFn: encode
})
getStorage('storage', {
  isDeleteExpired: true,
  parseFn: parse,
  decryptFn: decode
})

API

setStorage(key, value, [options]) / setStorageAsync(key, value, [options])

将给定的键值对以JSON字符串的形式存储在localStorage或sessionStorage中。
如果提供了options对象:

  • options.maxAge - 一个数字,表示过期时间,单位为秒(默认不过期)。
  • options.prefix - 一个字符串,表示键名的前缀(默认 globalPrefix)。
  • options.isLocalStorage - 一个布尔值,表示Web Storage的类型(默认 true)。
  • options.stringifyFn - 一个函数,表示将js值转换为JSON字符串的函数(默认 globalStringifyFn)。
  • options.encryptFn - 一个函数,表示加密JSON字符串的函数(默认不加密)。

getStorage(key, [options]) / getStorageAsync(key, [options])

根据给定的键名从localStorage或sessionStorage中获取值。
如果提供了options对象:

  • options.prefix - 一个字符串,表示键名的前缀(默认 globalPrefix)。
  • options.isLocalStorage - 一个布尔值,表示Web Storage的类型(默认 true)。
  • options.isDeleteExpired - 一个布尔值,表示是否删除过期的键值对(默认 false)。
  • options.parseFn - 一个函数,表示解析JSON字符串的函数(默认 globalParseFn)。
  • options.decryptFn - 一个函数,表示解密JSON字符串的函数(默认 null)。

removeStorage(key, [options]) / removeStorageAsync(key, [options])

根据给定的键名从localStorage或sessionStorage中删除值。
如果提供了options对象:

  • options.prefix - 一个字符串,表示键名的前缀(默认 globalPrefix)。
  • options.isLocalStorage - 一个布尔值,表示Web Storage的类型(默认 true)。

setGlobalPrefix(prefix)

设置键名的全局前缀。globalPrefix 默认值为 ''

stringify(data, [replacer])

增强版的 JSON.stringify,额外支持function、regexp、date、undefined、NaN、Infinity、-Infinity、bigint类型。
如果指定了一个 replacer 函数,则可以选择性地替换值。

import { stringify } from 'web-storage-plus'

const test = { a: 1,b: 2 }

stringify(test, (key, value) => {
  if (key === 'a') {
    return value + 1
  }
  return value
}) // {"a":2,"b":2}

parse(json, [reviver])

增强版的 JSON.parse,额外支持function、regexp、date、undefined、NaN、Infinity、-Infinity、bigint类型。
提供可选的 reviver 函数用以在返回之前对所得到的对象执行变换 (操作)。

import { parse } from 'web-storage-plus'

const json = '{"a":1,"b":2}'

parse(json, (key, value) => {
  if (key === 'a') {
    return value + 1
  }
  return value
}) // {a: 2, b: 2}

encode(str)

将字符串编码为base64格式。

decode(str)

将base64格式的字符串解码。

测试

测试用例

许可证

MIT