https://github.com/bcomnes/local-storage-proxy

Work with window.localStorage as if it were an object
https://github.com/bcomnes/local-storage-proxy

Last synced: 5 days ago
JSON representation

Work with window.localStorage as if it were an object

• Host: GitHub
• URL: https://github.com/bcomnes/local-storage-proxy
• Owner: bcomnes
• License: mit
• Created: 2019-09-01T17:49:18.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-24T14:09:11.000Z (about 1 year ago)
• Last Synced: 2024-11-01T18:42:20.689Z (12 days ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/local-storage-proxy
• Size: 117 KB
• Stars: 19
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# local-storage-proxy

Work with window.localStorage as if it were an object

```

npm install local-storage-proxy

```

## Usage

``` js

import localStorageProxy from 'https://unpkg.com/local-storage-proxy@^2?module'

window.localStorage.clear()

const state = localStorageProxy('namespace', {

  defaults: {

    some: [], // Doesn't override saved state

    defaults: null

  },

  lspReset: false

})

console.log(state.some) // []

state.some.push('foo')

console.log(state.some) // [ 'foo' ]

state.addEventListener('update', ev => {

  console.log('state was updated, or localStorage was updated on another tab')

})

console.log(window.localStorage.getItem('namespace')) // {"some":["foo"],"defaults":null}

```

## API

### `lsp = localStorageProxy(namespace, [opts])`

Create a local storage proxy attatched to a root `namespace`.  All gets and sets will JSON.stringify to this key.  Returns nested proxies that update the key when you set the value.  Performance may be limited, but its great for small peices of data with limited writes.

`lsp` is also an instance of an [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget) and will emit an event under the `update` namespace. This is triggered whenever you set a value on the local storage proxy, or when the [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event fires (e.g. when localStorage updates in another tab). The `storage` event is only listened for in the browser since there is no concept of a separate page or tab in node.js.

`opts` include:

```js

{

  defaults: {}, // Default keys to set.  Overridden by any existing local storage state

  lspReset: false,

  storageEventListener: true

}

```

Additions to the `opts.defaults` object can be safely added without overwriting existing data, and can also be assumed to be available even after the user has instantiated default and new data to the same namepace.

Default values are stored in localStorage. New default values can be added at any time, however if you change a default, you may need to updaate `lspReset`.

An `lspReset` key, set to false by default, can be used to force clear out local storage on all clients reloading if the value is different than the time they last loaded state.  It can be any JSON serializable object.  Strings work well.  This will need to be changed whenever change an existing default.

`storageEventListener` is a boolean that determines if the [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event is listened for, (only in the browser). Since there is no fined grained way to listen for a single namespace on this event, you might want to turn this off if localStorage is updated frequently by other routines which will cause local storage proxy to emit many `update` events.

## License

MIT