How to keep the type of storage value unchanged?
Tags: javascript, typescript, npm
Published: 2023-01-15 13:24:03

Hello, everyone! In September last year, I created a new repository called [proxy-web-storage](https://github.com/KID-joker/proxy-web-storage) which has over 200 stars now. It can helps some developers manage storage more easily, so I want to share it with you. If you think this repository is useful and deserves more attention, please click a star to support it. I'll introduce it below, so let's get started.

## What can proxy-web-storage do?

`proxy-web-storage` reflects every change of the storage through the `Proxy`. 

> The `Proxy` object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

### 1. Keep the type of storage value unchanged.

```js
import { local } from 'proxy-web-storage';

local.test = 'Hello proxy-web-storage'; // works
delete local.test; // works

// number
local.test = 0;
local.test === 0; // true

// boolean
local.test = false;
local.test === false; // true

// undefined
local.test = undefined;
local.test === undefined; // true

// null
local.test = null;
local.test === null; // true

// object
local.test = { hello: 'world' };
local.test.hello = 'proxy-web-storage'; // works

// array
local.test = ['hello'];
local.test.push('proxy-web-storage'); // works
local.test.length // 2

// Date
local.test = new Date('2000-01-01T00:00:00.000Z');
local.test.getTime() === 946684800000; // true

// RegExp
local.test = /d(b+)d/g;
local.test.test("cdbbdbsbz"); // true

// function
local.test = function() {
  return 'Hello proxy-web-storage!';
};
local.test() === 'Hello proxy-web-storage!'; // true
```
The `local` corresponds to `localStorage`, and the same is true for `session`. They have the same methods and properties: `key()`, `getItem()`, `setItem()`, `removeItem()`, `clear()` and `length`.

### 2. Listen to the changes.

```js
import { local } from 'proxy-web-storage';

local.on('test', function(newVal, oldVal) {
  console.log('test', newVal, oldVal);
});
local.on('test.a', function(newVal, oldVal) {
  console.log('test.a', newVal, oldVal);
});

local.test = {};
// test {} undefined

local.test.a = 1;
// test.a 1 undefined
```

It can also listens to changes triggered by other tabs.

#### on

Subscribe to an item.

- `key`: the name of the item to subscribe to. Support `obj.a` for `Object` and `list[0]` for `Array`, and also `Array` length.
- `callback`: the function to call when the item is changed. Includes `newValue` and `oldValue`.

#### once

Subscribe to an item only once.

- `key`: the name of the item to subscribe to. Support `obj.a` for `Object` and `list[0]` for `Array`.
- `callback`: the function to call when the item is changed. Includes `newValue` and `oldValue`.

#### off

Unsubscribe from an item or all items.

- `key(optional)`: the name of the item to unsubscribe from. If no key is provided, it unsubscribes you from all items.
- `callback(optional)`: the function used when binding to the item. If no callback is provided, it unsubscribes you from all functions binding to the item.

### 3. Set expires for items.

```js
import { local } from 'proxy-web-storage';

local.test = 'hello proxy-web-storage';
local.setExpires('test', Date.now() + 10000);

// within 10's
local.test // 'hello proxy-web-storage'

// after 10's
local.test // undefined
```

The expires is saved to localStorage. So page refresh or close will not affect its expiration. Within 10's, the value still exists. But after 10's, it has been removed.

#### setExpires

set expires for an item.

- `key`: the name of the item to set expires.
- `expires`: accept `string`、`number` and `Date`.

#### getExpires

return the expires(`Date`) of the item.

- `key`: the name of the item that has set expires.

#### removeExpires

cancel the expires of the item.

- `key`: the name of the item that has set expires.

The features of [proxy-web-storage](https://github.com/KID-joker/proxy-web-storage) are the above. But I would like to ask how to do the e2e test of localStorage? If you have any suggestion, whether it is about e2e testing or about the repository, please contact me or open an issue. Thanks for reading.