Package Exports

js-storage-manager

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (js-storage-manager) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Javascript Storage Manager

A library that makes the WebStorage easy to use: localStorage and sessionStorage (sessionStorage in progress).

npm NPM npm bundle size

Install

bower

$ bower install js-storage-manager

npm

$ npm install js-storage-manager

Git

$ git clone https://github.com/bjoern-hempel/js-storage-manager.git

$ git clone git@github.com:bjoern-hempel/js-storage-manager.git

Getting started

bower

$ mkdir webproject && cd webproject
$ bower install js-storage-manager
$ vi index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A simple js-storage-manager example</title>
    <script src="bower_components/js-storage-manager/dist/storage-manager.min.js"></script>
  </head>
  <body>
    <script>
      var sm = new StorageManager('namespace');

      sm.set('data', [{id: 123, name: 'Name 1'}, {id: 123, name: 'Name 2'}]);

      document.write(JSON.stringify(sm.get('data')));
    </script>
  </body>
</html>

npm

The direct way (the old javascript way)

$ mkdir webproject && cd webproject
$ npm install js-storage-manager
$ vi index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A simple js-storage-manager example</title>
    <script src="node_modules/js-storage-manager/dist/storage-manager.min.js"></script>
  </head>
  <body>
    <script>
      var sm = new StorageManager('namespace');

      sm.set('data', [{id: 123, name: 'Name 1'}, {id: 123, name: 'Name 2'}]);

      document.write(JSON.stringify(sm.get('data')));
    </script>
  </body>
</html>

The webpack way (the modern javascript way)

$ mkdir webproject && cd webproject

$ vi package.json

{
  "name": "js-storage-manager-test",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
    "start:dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "MIT"
}

$ npm install js-storage-manager --save
$ npm install webpack --save-dev
$ npm install webpack-cli --save-dev
$ npm install webpack-dev-server --save-dev
$ mkdir src
$ vi src/index.js

let StorageManager = require('js-storage-manager')

let sm = new StorageManager('namespace')

function component() {
  let element = document.createElement('div');
  
  sm.set('data', [{id: 123, name: 'Name 1'}, {id: 123, name: 'Name 2'}]);

  element.innerHTML = JSON.stringify(sm.get('data'));

  return element;
}

document.body.appendChild(component());

$ vi webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  watch: true,
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080
  }
};

$ mkdir dist
$ vi dist/index.html

<!doctype html>
<html>
  <head>
    <title>A simple js-storage-manager example</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

$ npm run start:dev

All your changes are now under observation and will automatically be re-rendered in the /dist directory. Make the changes in /src and paste them directly into your browser.

Open your browser at: http://localhost:8080 (to see the results)

Git

$ mkdir webproject && cd webproject
$ mkdir vendor && cd vendor
$ git clone https://github.com/bjoern-hempel/js-storage-manager.git
$ cd ..
$ vi index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>A simple js-storage-manager example</title>
    <script src="vendor/js-storage-manager/dist/storage-manager.min.js"></script>
  </head>
  <body>
    <script>
      var sm = new StorageManager('namespace');

      sm.set('data', [{id: 123, name: 'Name 1'}, {id: 123, name: 'Name 2'}]);

      document.write(JSON.stringify(sm.get('data')));
    </script>
  </body>
</html>

Maintenance

Checkout the repository

$ git clone git@github.com:bjoern-hempel/js-storage-manager.git && cd js-storage-manager
$ npm install

Extend, fix bugs in classes below /src folder.
Write more tests below the /test folder.
Run the tests.

$ npm test

$ npm run test:unit

Build the /dist files

$ npm run build

Commit your changes

$ git add ...
$ git commit -m "my bugfixes" .
$ git push

Change the version number

$ vi package.json

...
"version": "0.0.14",
...

$ git tag v0.0.14
$ git push origin v0.0.14

Publish on npm

$ npm publish

A. Authors

Björn Hempel bjoern@hempel.li - Initial work - https://github.com/bjoern-hempel

B. Changelog

Changes are tracked as GitHub releases or in reverse order here.

C. License

This library is licensed under the MIT License - see the LICENSE.md file for details