florian / xstore

Client-side stores that serialize data for you

xStore

xStore wraps the HTML5 localStorage and sessionStorage APIs to provide client-side storage, mainly targeted at web apps. It allows you to create different data stores that serialize data for you.

In a nutshell:

• It's small: 0.8 KB if minified+gzipped and it doesn't have dependencies
• xStore serializes Booleans, numbers, strings, arrays and plain objects for you
• Chaining support
• It has a cookie.js like interface.
• You can choose if your storage should be persistent (localStorage) or just for a session (sessionStorage)

Some example code

var store = new xStore("prefix", localStorage);
store.set({
  list: [1, 2],
  counter: 1
});

// Later

store.push('list', 3, 4).increase('counter'); // Chaining is awesome

// And read the values:

store.get('list'); // [1, 2, 3, 4]
store.get('counter'); 2

Another micro library for client-side storage?

Yep, there are already some similar libraries out there, but I decided to write my own one because none didn't really fit my needs. xStore only supports browers that are somewhat modern. Furthermore it has an interface that makes working with client-side storage a breeze.

Getting started

Read these wiki entries:

• Getting started
• Documentation

xstore's Issues

remove .js extension from name

I feel loStorage.js is inconsistently named compared to rest of the component modules since the require('loStorage.js') is odd .

.get needs prefix to be prefixed to key

Not sure if this is by design. The sample code on the main page does not uses the prefix to access value.

var store = new xStore('prefix:', localStorage);
store.empty();
store.set("userToken" , "some value");
console.log(store.get("userToken")); //undefined
console.log(store.get("prefix:userToken")); //some value

https://jsbin.com/rexajaqehu/1/edit?html,js,console

Release 2.0.2 is not available on github

The changes that you have pushed to fix #7 are in version 2.0.2

Several typos in API documentation

There are the following typos in API documentation:

This allows seperate stores with different prefixes to save values under the same key.

Use the get method, or its shortcut: store.) / session(), to retrieve values.

store.'key'); // Or: session('key')

Call store.all to get all data saved with the `store. object:

This will remove all of the data that was saved with `store.:

This appends a string to a store. /session` value:

extend does not work as advertised

Using the example code from the documentation in Chrome Version 19.0.1084.46...

storage.set('object', { a: 1 });

function () {
return storage.get.apply(storage, arguments);
}

storage.extend('object', 'b', 1).get('object'); // { a: 1, b: 2 }

TypeError: Object object has no method 'getItem'
arguments: Array[2]
get message: function () { [native code] }
get stack: function () { [native code] }
set message: function () { [native code] }
set stack: function () { [native code] }
type: "undefined_method"
proto: Error

It appears extend does not pass the parameters correctly to the get method when retrieving the key to by extended.

.empty() clears whole localStorage/sessionStorage

Hi, it seems that .empty() in fact clears the whole storage and not just the entry on which it is called.

Creation of xStore:

  var xStore = function (prefix, store) {
    this.prefix = prefix;
    this.store = store;
  };

Emptying an xStore:

  xStore.prototype.empty = function () {
    this.store.clear();
    return this;
  };

Problem: "this.store" actually is the whole localStorage, respectively sessionStorage, and thus always clears everything and not just the prefix-specific entries.

Will this be corrected? Because the documentation about "This will remove all of the data that was saved with store" is quite misleading in this case, as the assumption will be that "store" in that case is specific for prefix that was used.

Chaining doesn't work with increase

Trying this:
loStorage.storage.increase('my-key').get('my-key')

Gives me this error:
Uncaught TypeError: Cannot call method 'get' of undefined

XStore remove function does not work

Hi,

thanks for this nice library!

One thing i discovered: xStore.remove function does not remove the item from the storage:

Line 150 should be modified from:
delete this.store[keys[i]];
to:
this.store.removeItem(keys[i]);

Thanks!

Removing item from localStorage

Some I am using this to update alerts when users visit the homepage so they have access to them on the sub pages. This is because we are using a custom framework that doesn't really support this functionality.

So every time the user goes to the homepage it will append new alerts to the localstorage, but I would also like to use this time to clean out the old alerts so the localstorage never fills up.

my code looks like this

console.log(epsAlerts.all());
$.each(epsAlerts.all(), function(index, alert) {
	if ($('#sw-content-container11 .announcements a[href="#' + index +'"]').length >= 1) {
		$('.z-mystart .dropdown-alerts .dropdown-menu').append('<li>'+alert.content+'</li>');
	}else{
		console.log(index);
		epsAlerts.remove(index);
	}
});
console.log(epsAlerts.all());

I get the console.log(index) for my third item that has expired and should no longer be displayed. However when calling the second console.log(epsAlerts.all()); I can still see all three of the alerts.

I am using the latest release (v2.0.3) downloaded today (5/3/2017). Am I using the .remove wrong or doing something else wrong? Thank you for any assistance you can provide.

console.log(index); = alert12326032269

Last console.log(epsAlerts.all()) returns

{
	"alert02325932268": {
		"content": "<div class=\"ui-article-description danger\"><span><p>Due to a facility issue at Central Tech, school has been cancelled today for <strong>Central Tech and Roosevelt students only</strong>. All other schools are in session today (5/26).</p></span></div>",
		"visible": true
	},
	"alert02326032270": {
		"content": "<div class=\"ui-article-description info\"><span><p><strong>Board of School Directors</strong></p><p>Committee of the Whole Meeting starting at 6pm.</p></span></div>",
		"visible": true
	},
	"alert12326032269": {
		"content": "<div class=\"ui-article-description info\"><span><p>Due to a facility issue at Central Tech, school has been cancelled today for<br>Example.com</p></span></div>",
		"visible": true
	}
}