Skip to content

👍 Better localStorage as well as Next localStorage.

License

Notifications You must be signed in to change notification settings

GavinBirkhoff/storetify

Repository files navigation

Build Status codecov license release

English | 简体中文

The encapsulation of local storage localStorage, provides expiration time setting and subscription functions, provides simple API use, no dependencies, and the compression is only 3.71KB (gzipped: 1.37KB).

✨ Features

  • Better localStorage, Next localStorage
  • Learn and use easily
  • Expiration time of support data
  • Support for monitoring data changes
  • Built with TypeScript, providing full type definition files

🪄 Install

# npm install
npm install storetify

# yarn install
yarn add storetify

#pnpm install
pnpm add storetify

🏗️ Build

npm run build

🧪 Test

npm test

🔨 Usage

import store from 'storetify';
store("test","storetify");

or manually download and include in your HTML storetify.min.js,you can also pass UNPKG to download:

<script src="https://unpkg.com/storetify/lib/storetify.min.js"></script>
<script type="text/javascript">
Storetify("test","storetify");
</script>

⚙️ API

set

Storing data store.set(key, data[, expires]); or store(key, data[, expires]);

store.set("test","1"); //⇒1
store.set("test","1",3); //⇒1 test expires after 3 seconds

get

Get string data of key store.get(key) or store(key)

store.get("test"); // Get the string data of test
store("test"); // Same function as above

remove

delete data under key store.remove(key)

store.remove("test");

clear

clear all key/data store.clear()

store.clear(); // Will publish all key value changes

has

Check if it exists and return true/false store.has(key)

store.has("test"); //⇒true

subscribe

Subscribe to test data changes

store.subscribe("test",(e)=>{})

For the event variable e, it is an abbreviated object from the StorageEvent object, which provides some practical properties, which can be used to observe the changes of key-value pairs well, as shown in the following table:

type StoretifyEventValue = Record<string, any> | any[] | null | string | number
Property Type Description
key string The key to store the value, modify, delete according to it
oldValue StoretifyEventValue last value
newValue StoretifyEventValue current new value
type string event type
native StorageEvent native event

unsubscribe

Unsubscribe from test data changes

const someName = (e)=>{}
store.subscribe("test",someName)
store.unsubscribe("test",someName) // ⚠️Note that unsubscribe cannot be an anonymous method
store.unsubscribe("test") // ⚠️Note that all subscriptions to test will be cancelled including anonymous functions

getUsed

Get the storage usage of the store

store.getUsed() // return `0.111 KB`

Compatibility

source:localStorage

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit) iPhone(IOS) Android Opera Mobile Window Phone
localStorage 4+ 3.5+ 8+ 10.50+ 4+ 3.2+ 2.1+ 11+ 8+

local storage size

JSON.stringify(localStorage).length How much capacity is currently occupied

Detect the upper limit of localstore capacity