• Stars
    star
    13,944
  • Rank 2,041 (Top 0.05 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 14 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Cross-browser storage for all use cases, used across the web.

Store.js

Cross-browser storage for all use cases, used across the web.

Circle CI npm version npm

Store.js has been around since 2010 (first commit, v1 release). It is used in production on tens of thousands of websites, such as cnn.com, dailymotion.com, & many more.

Store.js provides basic key/value storage functionality (get/set/remove/each) as well as a rich set of plug-in storages and extra functionality.

  1. Basic Usage
  2. Supported Browsers
  3. Plugins
  4. Builds
  5. Storages

Basic Usage

All you need to know to get started:

API

store.js exposes a simple API for cross-browser local storage:

// Store current user
store.set('user', { name:'Marcus' })

// Get current user
store.get('user')

// Remove current user
store.remove('user')

// Clear all keys
store.clearAll()

// Loop over all stored values
store.each(function(value, key) {
	console.log(key, '==', value)
})

Installation

Using npm:

npm i store
// Example store.js usage with npm
var store = require('store')
store.set('user', { name:'Marcus' })
store.get('user').name == 'Marcus'

Using script tag (first download one of the builds):

<!-- Example store.js usage with script tag -->
<script src="path/to/my/store.legacy.min.js"></script>
<script>
store.set('user', { name:'Marcus' })
store.get('user').name == 'Marcus'
</script>

Supported Browsers

All of them, pretty much :)

To support all browsers (including IE 6, IE 7, Firefox 4, etc.), use require('store') (alias for require('store/dist/store.legacy')) or store.legacy.min.js.

To save some kilobytes but still support all modern browsers, use require('store/dist/store.modern') or store.modern.min.js instead.

List of supported browsers

Plugins

Plugins provide additional common functionality that some users might need:

List of all Plugins

Using Plugins

With npm:

// Example plugin usage:
var expirePlugin = require('store/plugins/expire')
store.addPlugin(expirePlugin)

If you're using script tags, you can either use store.everything.min.js (which has all plugins built-in), or clone this repo to add or modify a build and run make build.

Write your own plugin

A store.js plugin is a function that returns an object that gets added to the store. If any of the plugin functions overrides existing functions, the plugin function can still call the original function using the first argument (super_fn).

// Example plugin that stores a version history of every value
var versionHistoryPlugin = function() {
	var historyStore = this.namespace('history')
	return {
		set: function(super_fn, key, value) {
			var history = historyStore.get(key) || []
			history.push(value)
			historyStore.set(key, history)
			return super_fn()
		},
		getHistory: function(key) {
			return historyStore.get(key)
		}
	}
}
store.addPlugin(versionHistoryPlugin)
store.set('foo', 'bar 1')
store.set('foo', 'bar 2')
store.getHistory('foo') == ['bar 1', 'bar 2']

Let me know if you need more info on writing plugins. For the moment I recommend taking a look at the current plugins. Good example plugins are plugins/defaults, plugins/expire and plugins/events.

Builds

Choose which build is right for you!

List of default builds

Make your own Build

If you're using npm you can create your own build:

// Example custom build usage:
var engine = require('store/src/store-engine')
var storages = [
	require('store/storages/localStorage'),
	require('store/storages/cookieStorage')
]
var plugins = [
	require('store/plugins/defaults'),
	require('store/plugins/expire')
]
var store = engine.createStore(storages, plugins)
store.set('foo', 'bar', new Date().getTime() + 3000) // Using expire plugin to expire in 3 seconds

Storages

Store.js will pick the best available storage, and automatically falls back to the first available storage that works:

List of all Storages

Storages limits

Each storage has different limits, restrictions and overflow behavior on different browser. For example, Android has has a 4.57M localStorage limit in 4.0, a 2.49M limit in 4.1, and a 4.98M limit in 4.2... Yeah.

To simplify things we provide these recommendations to ensure cross browser behavior:

Storage Targets Recommendations More info
all All browsers Store < 1 million characters (Except Safari Private mode)
all All & Private mode Store < 32 thousand characters (Including Safari Private mode)
localStorage Modern browsers Max 2mb (~1M chars) limits, android
sessionStorage Modern browsers Max 5mb (~2M chars) limits
cookieStorage Safari Private mode Max 4kb (~2K chars) limits
userDataStorage IE5, IE6 & IE7 Max 64kb (~32K chars) limits
globalStorage Firefox 2-5 Max 5mb (~2M chars) limits
memoryStorage All browsers, fallback Does not persist across pages!

Write your own Storage

Chances are you won't ever need another storage. But if you do...

See storages/ for examples. Two good examples are memoryStorage and localStorage.

Basically, you just need an object that looks like this:

// Example custom storage
var storage = {
	name: 'myStorage',
	read: function(key) { ... },
	write: function(key, value) { ... },
	each: function(fn) { ... },
	remove: function(key) { ... },
	clearAll: function() { ... }
}
var store = require('store').createStore(storage)

More Repositories

1

WebViewJavascriptBridge

An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews
Objective-C
14,247
star
2

WebViewProxy

A standalone iOS & OSX class for intercepting and proxying HTTP requests (e.g. from a Web View)
Objective-C
866
star
3

fun

A programming language for the realtime web.
JavaScript
174
star
4

fin

Realtime data layer for web applications
JavaScript
87
star
5

require

javascript module management. brings node's require statement and npm to the browser
JavaScript
59
star
6

node-kafka

NOT MAINTAINED. See below:
JavaScript
43
star
7

std.js

javascript standard library
JavaScript
33
star
8

alderaan

Alderaan uses Bespin to create a TextMate inspired code editor in the browser. In contrast to Bespin, it is intended to be run against your local file system, and has full terminal/command line integration.
JavaScript
13
star
9

Caret-position

Get and set the user's caret/selection on input/textarea elements
JavaScript
13
star
10

old-tags.js

A small, fast & standalone convenience library for building dom.
JavaScript
7
star
11

ui.js

javascript ui
JavaScript
6
star
12

ometa-js

Clone of the ometa-js svn repository
JavaScript
6
star
13

twitter.js

A thin wrapper for the Twitter jsonp API
JavaScript
5
star
14

tinytest.js

Tiny testing framework for the browser
JavaScript
5
star
15

blowtorch

Native <3 Web
Objective-C
4
star
16

fun-go

Some tools for more fun go
Go
4
star
17

dom.js

JavaScript
4
star
18

Focus

realtime, collaborative task management
JavaScript
3
star
19

FunObjc

Fun ObjC
C
3
star
20

js.ui

js.ui provides an idiomatic approach to creating UI code in vanilla JS.
TypeScript
2
star
21

go-tp

Go text processing
Go
2
star
22

git-star

git* - a bunch of common git tasks made less verbose
Shell
2
star
23

tags.js

JavaScript
2
star
24

marcuswest.in

marcuswestin.in
JavaScript
2
star
25

remote-console

JavaScript
1
star
26

invest

JavaScript
1
star
27

monorepo-merge

Import multiple repos into a single mono repo, into custom subfolder paths, while maintaining full commit history for all repos
Shell
1
star
28

oldDogo

JavaScript
1
star
29

tfocus

Old (abandoned) web-based iPhone todo list w/ server
JavaScript
1
star
30

StayAccount

Objective-C
1
star
31

screenlog

Keep a screenshot log of your computer
1
star
32

marcuswestin.com

Abandoned in favor of http://github.com/marcuswestin/marcuswest.in
JavaScript
1
star
33

js-birect

Efficient, scalable and language-agnostic bidirectional realtime messaging with request/response support.
JavaScript
1
star