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, sessionStorage and Cookies (sessionStorage and Cookies are in progress: #2, #3).

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>

The next steps

How to use the StorageManager in the easiest way

var sm = new StorageManager('namespace');
var data_initial = [{id: 1, name: 'Name 1'}, {id: 2, name: 'Name 2'}];

/* save data_initial to localStorage.storage.namespace.data */
sm.set('data', data_initial);

var data_from_web_storage = sm.get('data');

How to use multiple namespaces

var namespace_1 = 'namespace1';
var namespace_2 = 'namespace2';

var sm_1 = new StorageManager(namespace_1);
var sm_2 = new StorageManager(namespace_2);

var data_initial_1 = [{id: 1, name: 'Name 1'}, {id: 2, name: 'Name 2'}];
var data_initial_2 = [{id: 3, name: 'Name 3'}, {id: 4, name: 'Name 4'}];

/* save data_initial to localStorage.storage.namespace1.data */
sm.set('data', data_initial_1);

/* save data_initial to localStorage.storage.namespace2.data */
sm.set('data', data_initial_2);

var data_from_web_storage_1 = sm_1.get('data');
var data_from_web_storage_2 = sm_2.get('data');

How to manage the storage yourself

var sm = new StorageManager('namespace');
var data_initial = [{id: 1, name: 'Name 1'}, {id: 2, name: 'Name 2'}];

/* Get the storage data object. */
var storage = sm.getStorage();

/* Do something with the data object. */
storage.data = data_initial;

/* Manually save the data object in WebStorage. */
sm.setStorage(storage)

How the StorageManager saves changes to the storage itself

var sm = new StorageManager('namespace');
var data_initial = [{id: 1, name: 'Name 1'}, {id: 2, name: 'Name 2'}];
var observable = true; // <- important

/* The returned storage data object is now of type "Proxy". */
var storage = sm.getStorage(observable);

/* Do something with the data object. */
storage.data = data_initial;
/* sm.setStorage(storage) is no longer needed. Changes are automatically saved in WebStorage. */

How to create and use a queue list

Attention: This area is under revision. See #1

var sm = new StorageManager('namespace');
var queue_data_1 = {[id: 1, name: 'Name 1']};
var queue_data_2 = {[id: 2, name: 'Name 2']};

/* Initialize the queue (optionally) */
sm.initQueue();

/* Add records to the queue. The queue namespace used is 'queue'. */
sm.pushQueue(queue_data_1);
sm.pushQueue(queue_data_2);

/* Get the number of queue items. */
var number_of_queue_items = sm.getNumberOfQueuesItems();

/* Read the entire queue */
var queue = sm.getQueue();

/* Get the next queue item (FIFO) */
var next_queue_item = sm.getNextQueueItem();

/* Get the next queue entry and delete it. */
var next_queue_item = ms.deleteNextQueueItem();

How to use your own queue namespace

Attention: This area is under revision. See #1

var sm = new StorageManager('namespace');
var queue_data_1 = {[id: 1, name: 'Name 1']};
var queue_data_2 = {[id: 2, name: 'Name 2']};
var my_queue_namespace = 'my_queue'

/* Initialize the queue (optionally) */
sm.initQueue(my_queue_namespace);

/* Add records to the queue. The queue namespace used is now 'my_queue'. */
sm.pushQueue(queue_data_1, my_queue_namespace);
sm.pushQueue(queue_data_2, my_queue_namespace);

/* Get the number of queue items. */
var number_of_queue_items = sm.getNumberOfQueuesItems(my_queue_namespace);

/* Read the entire queue */
var queue = sm.getQueue(my_queue_namespace);

/* Get the next queue item (FIFO) */
var next_queue_item = sm.getNextQueueItem(my_queue_namespace);

/* Get the next queue entry and delete it. */
var next_queue_item = sm.deleteNextQueueItem(my_queue_namespace);

How to get the LocalStorage area completely managed by the StorageManager

var sm = new StorageManager('namespace');

/* Returns the LocalStorage area as a ready-parsed object. */
var local_storage_managed_by_sm = sm.getLocalStorage();

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 to npm

$ npm publish

Create Release

$ gren release

Adapt the changelog text to github if necessary: changelog. Show all commits:

$ git log --oneline --decorate

Update CHANGELOG.md

$ gren changelog --override

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