
Security News
PodRocket Podcast: Inside the Recent npm Supply Chain Attacks
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
web-storage-object
Advanced tools
API providing 2 way binding of JavaScript objects to browser WebStorage
API providing 2 way binding of JavaScript objects to browser WebStorage API consists of two mechanisms, each is used to bind and persist any JavaScript object to specific WebStorage type:
Include with script tag:
<script src="dist/web-storage-object.min.js"></script>
or if you prefer NPM:
npm install web-storage-object
and include as:
import {LocalStorageObject, SessionStorageObject} from 'web-storage-object'
Given the simple object representing our data we can use the API like this:
var heroModel = {
name: 'Ogox',
weapon: 'Axe',
horse: true,
armor: {
head: 'Steel Helmet',
body: 'Rags',
boots: 'Wraps'
}
}
var ogox = new LocalStorageObject(heroModel, 'ogox')
Now if you check localStorage inside dev tools of your browser you will see:
Now if we modify any ogox weapon property, lets say like this:
ogox.weapon = 'Heavy Axe'
The changes will be automatically persistant and changed inside localStorage. You can check your dev tools again. Also if you do:
console.log(ogox)
console.log(ogox.weapon)
As you can see it behaves just as any other object except with help of JavaScript Proxy object changes are saved and fetched from WebStorage.
To use sessionStorage call the SessionStorageObject constructor.
var ogox = new SessionStorageObject(heroModel, 'ogox')
It also works out of the box with nested object properties like:
ogox.armor.body = 'Heavy Armor' // updates property inside browser storage
You can define new properties just like with any JS object:
ogox.armor.hands = 'Shoulder Plates'
ogox.level = 42
ogox.items = [
'carrot',
'spoon',
'rotten meat'
]
console.log(ogox.items[1]) // prints 'spoon' to console
Let's say you already have some data for the given key saved to storage and you just want to load that. You can do it like this:
var ogox = new LocalStorageObject({}, 'ogox', false) // overwrite flag set to false
If overwrite flag is set to false and no data exists in Storage then in this case constructor would return empty LocalStorageObject object.
You can use delete operator to delete properties, this will delete property and sync webStorage:
delete ogox.armor.hands
delete ogox.level
You can use files inside /dist folder or build your own.
$ git clone https://github.com/capJavert/web-storage-object.git
$ web-storage-object
$ npm install
Build scripts are:
$ npm run build
or minified version:
$ npm run build_prod
FAQs
API providing 2 way binding of JavaScript objects to browser WebStorage
We found that web-storage-object demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh discusses the recent npm supply chain attacks on PodRocket, covering novel attack vectors and how developers can protect themselves.
Security News
Maintainers back GitHub’s npm security overhaul but raise concerns about CI/CD workflows, enterprise support, and token management.
Product
Socket Firewall is a free tool that blocks malicious packages at install time, giving developers proactive protection against rising supply chain attacks.