Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
web-storage-manager
Advanced tools
web-storage-manager - npm Package Compare versions
Comparing version 3.1.0 to 3.1.1
| { | ||
| "name": "web-storage-manager", | ||
| "version": "3.1.0", | ||
| "version": "3.1.1", | ||
| "description": "Web utility storage manager to handle save, update and data purge", | ||
@@ -5,0 +5,0 @@ "main": "lib/index.js", |
225
README.md
@@ -6,186 +6,81 @@ [](https://nodei.co/npm/web-storage-manager/) | ||
| ## Demo | ||
| [Demo Page](https://github.com/nferocious76/web-storage-manager-example) | ||
| ## Installation | ||
| ```bash | ||
| npm install web-storage-manager --save | ||
| ``` | ||
| ## Imports | ||
| npm i web-storage-manager --save | ||
| ```js | ||
| import { LocalStorage, SessionStorage } from 'web-storage-manager'; | ||
| ``` | ||
| or using helper | ||
| ## Imports | ||
| ```js | ||
| import { createLocalStorage, createSessionStorage } from 'web-storage-manager'; | ||
| const LocalStorage = createLocalStorage(window); | ||
| const SessionStorage = createSessionStorage(window); | ||
| ``` | ||
| import { LocalStorage, SessionStorage, EncodedLocalStorage, EncodedSessionStorage } from 'web-storage-manager'; | ||
| or using the base class | ||
| ```js | ||
| import { WebStorage } from 'web-storage-manager'; | ||
| const LocalStorage = new WebStorage(window.localStorage); | ||
| const SessionStorage = new WebStorage(window.sessionStorage); | ||
| ``` | ||
| ## Usage | ||
| or using helper | ||
| ```js | ||
| // Storage = LocalStorage || SessionStorage | ||
| // update item on key path of previously saved data | ||
| const keyPath = 'targetKeyOnParent.collection.targetObject.changethis' | ||
| const keyPath2 = 'targetKeyOnParent.collection.targetObject.changethis2' | ||
| import { createLocalStorage, createSessionStorage } from 'web-storage-manager'; | ||
| Storage.updateItemInItem(keyPath, valueInObj, 'id') | ||
| Storage.updateItemInItem(keyPath2, valueInObj) | ||
| // Options conforms to: | ||
| /* | ||
| interface Options { | ||
| delimiter?: string, | ||
| isEncoded: boolean | ||
| } | ||
| */ | ||
| // append item | ||
| Storage.appendItem('test-sample', { new_item : { desc: 'new test item' } }) | ||
| // createLocalStorage(window, options) | ||
| const LocalStorage = createLocalStorage(window, { isEncoded: false }); | ||
| const SessionStorage = createSessionStorage(window, { isEncoded: false }); | ||
| const EncodedLocalStorage = createLocalStorage(window, { isEncoded: true }); | ||
| const EncodedSessionStorage = createSessionStorage(window, { isEncoded: true }); | ||
| ``` | ||
| ### Examples | ||
| or using the base class | ||
| ```js | ||
| import React, { Component } from 'react'; | ||
| import logo from './logo.svg'; | ||
| import './App.css'; | ||
| import { LocalStorage, SessionStorage } from 'web-storage-manager'; | ||
| import { WebStorage, EncodedWebStore } from 'web-storage-manager'; | ||
| const isLocalToggle = true; | ||
| const Storage = isLocalToggle ? LocalStorage : SessionStorage; | ||
| // both class has a constructor: | ||
| // constructor(storage: Storage, delimiter: string = '.') | ||
| class App extends Component { | ||
| const LocalStorage = new WebStorage(window.localStorage, delimiter); | ||
| const SessionStorage = new WebStorage(window.sessionStorage, delimiter); | ||
| componentWillMount() { | ||
| const EncodedLocalStorage = new EncodedWebStore(window.localStorage, delimiter); | ||
| const EncodedSessionStorage = new EncodedWebStore(window.sessionStorage, delimiter); | ||
| // updateItemInItem example | ||
| const testItems = [ | ||
| { | ||
| id: 1, | ||
| value: '777', | ||
| description: 'test item 1' | ||
| }, { | ||
| id: 2, | ||
| value: '888', | ||
| description: 'test item 2' | ||
| }, { | ||
| id: 3, | ||
| value: '999', | ||
| description: 'test item 3' | ||
| } | ||
| ] | ||
| ``` | ||
| const testOjb = { | ||
| name: 'Object', | ||
| value: 'target of change', | ||
| description: 'test item for object type' | ||
| } | ||
| ## Usage and Examples | ||
| const tObj = { | ||
| 'changethis': testItems, // key of this | ||
| 'changethis2': testOjb // key of this | ||
| } | ||
| Please refer to test files `local.test.js` and `session.test.js` for a complete sample and usage. | ||
| let collection = { | ||
| name: 'The data where our target object was saved', | ||
| 'targetObject': tObj // key of this | ||
| } | ||
| ```js | ||
| let collectionInfo = { | ||
| description: 'just another layer for testing', | ||
| 'collection': collection // key of this | ||
| } | ||
| WebStorage.setItem('sampleKey', 'sampleValue'); | ||
| let parentItem = { | ||
| name: 'parent item', | ||
| description: 'test object', | ||
| 'targetKeyOnParent': collectionInfo // key of this | ||
| const testObject = { | ||
| nestedKey: { | ||
| nestedKeyA: 'nestedKeyA-target-value', | ||
| nestedKeyB: { | ||
| nestedKeyC: { itemKey: 'itemKey-value', itemKey2: 'itemKey2-target-value' }, | ||
| nestedKeyD: [{ id: 'id1' }, { id: 'id2' }, { id: 'id3' }, { id: 'idz' }] | ||
| } | ||
| } | ||
| }; | ||
| Storage.setItem('test-sample', parentItem, true); | ||
| Storage.setItem('test-sample-for-compare', parentItem); | ||
| const isSuccess = WebStorage.setItem('testKey', testObject); | ||
| // expected result: true | ||
| const valueInObj = { | ||
| id: 2, | ||
| value: '01220', | ||
| description: 'test item 101' | ||
| } | ||
| const item2 = WebStorage.getItemInItem('testKey.nestedKey.nestedKeyA'); | ||
| // expected result: nestedKeyA-target-value | ||
| const keyPath = 'test-sample.targetKeyOnParent.collection.targetObject.changethis' | ||
| Storage.updateItemInItem(keyPath, valueInObj, 'id') | ||
| const keyPath2 = 'test-sample.targetKeyOnParent.collection.targetObject.changethis2' | ||
| Storage.updateItemInItem(keyPath2, valueInObj) | ||
| const keyPath3 = 'test-sample.targetKeyOnParent.collection.targetObject2' | ||
| Storage.updateItemInItem(keyPath3, testItems) | ||
| const valueInObj2 = { | ||
| id: 1, | ||
| value: '015', | ||
| description: 'test item 151' | ||
| } | ||
| const keyPath4 = 'test-sample.targetKeyOnParent.collection.targetObject2' | ||
| Storage.updateItemInItem(keyPath4, valueInObj2) | ||
| // append | ||
| Storage.appendItem('test-sample', { new_item : { desc: 'new test item' } }) | ||
| Storage.removeItemInItem(keyPath, valueInObj, 'id') | ||
| Storage.setItem('copy', Storage.getItem('test-sample')) | ||
| // save multiple | ||
| Storage.setMultiple([ | ||
| { | ||
| key: 'multiple-save-1', | ||
| value: 'multiple-save-data-1' | ||
| }, | ||
| { | ||
| key: 'multiple-save-2', | ||
| value: ['multiple-save-data-2', 'multiple-save-data-2'] | ||
| },{ | ||
| key: 'multiple-save-3', | ||
| value: { desc: 'multiple-save-data-3' } | ||
| } | ||
| ]) | ||
| } | ||
| render() { | ||
| return ( | ||
| <div className="App"> | ||
| <header className="App-header"> | ||
| <img src={logo} className="App-logo" alt="logo" /> | ||
| <p> | ||
| Edit <code>src/App.js</code> and save to reload. | ||
| </p> | ||
| <a | ||
| className="App-link" | ||
| href="https://reactjs.org" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Learn React | ||
| </a> | ||
| </header> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| export default App; | ||
| ``` | ||
@@ -197,23 +92,20 @@ | ||
| appendItem: ƒ (key, value) | ||
| combineObject: ƒ (object, toObject) | ||
| decode: ƒ (encObj) | ||
| encode: ƒ (obj) | ||
| getItem: ƒ (key) | ||
| getItemInItem: ƒ (keyPath, value, attrCompare) | ||
| getMultiple: ƒ (keys) | ||
| hasData: ƒ (key) | ||
| indexOfObject: ƒ (collection, object, attr) | ||
| isDataEncoded: ƒ (data) | ||
| purge: ƒ () | ||
| removeItem: ƒ (key) | ||
| removeItemInItem: ƒ (keyPath, value, attrCompare) | ||
| removeMultiple: ƒ (keys) | ||
| setItem: ƒ (key, value, encoded) | ||
| setMultiple: ƒ (items, encoded) | ||
| storage: ƒ () | ||
| updateItemInItem: ƒ (keyPath, value, attrCompare) | ||
| key: ƒ key(n) | ||
| length: ƒ length() | ||
| setItem: ƒ setItem(key, value) | ||
| getItem: ƒ getItem(key) | ||
| clear: ƒ clear() | ||
| getItemInItem: ƒ getItemInItem(key, attrCompare) | ||
| getMultipleItems: ƒ getMultipleItems(keys) | ||
| appendItemInItem: ƒ appendItemInItem(key, value) | ||
| setMultipleItems: ƒ setMultipleItems(items) | ||
| updateItemInItem: ƒ updateItemInItem(key, attrCompare, newValue) | ||
| removeItem: ƒ removeItem(key) | ||
| removeItemInItem: ƒ removeItemInItem(key, attrCompare) | ||
| removeMultipleItems: ƒ removeMultipleItems(keys) | ||
| ``` | ||
| ## Unit Test | ||
| <img width="1099" alt="Screenshot 2023-06-28 at 6 12 02 PM" src="https://github.com/nferocious76/web-storage-manager/assets/8805997/66e72f6e-52ab-43d9-95ce-6ba0b0e7a077"> | ||
@@ -225,3 +117,4 @@ ## Contribute | ||
| This project was inpired by 'react-persist' that was discontinued. | ||
| This project was inpired by 'react-persist' that I felt lacking of the functionalities that I need that I decided to create my own on top of Storage API. | ||
| This project has grown and had a major rebump in its version 3. | ||
@@ -228,0 +121,0 @@ ## License |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.81%
258608
- Number of lines in readme file
- decreased by-46.93%
121
No dependency changes