In HTML5, is the localStorage object isolated per page/domain?

Question

Is the HTML5 localStorage object isolated per page/domain? I am wondering because of how I would name localStorage keys. Do I need a separate prefix? Or can I name them whatever I want?

Answer 1

It's per domain (the same segregation rules as the same origin policy), to make it per-page you'd have to use a key based on the location, or some other approach.

You don't need a prefix, use one if you need it though. Also, yes, you can name them whatever you want.

Answer 2

The stores are per origin, where origin is the same as for the Same Origin Policy (a combination of schema [http vs. https, etc.], port, and host). From the spec:

Each top-level browsing context has a unique set of session storage areas, one for each origin.

Thus, the storage for http://a.example.com and the storage for http://b.example.com are separate (and they're both separate from http://stackoverflow.com) as those are all different hosts. Similarly, http://example.com:80 and http://example.com:8080 and https://example.com are all different origins.

There is no mechanism built into web storage that allows one origin to access the storage of another.

Note that it's origin, not URL, so http://example.com/page1 and http://example.com/page2 both have access to the storage for http://example.com.

Answer 3

Yeah, each domain/subdomain has a different localStorage and you can call the keys whatever you want (prefix is not required).

To get a key you can use the method key(index) such as

localStorage.key(0);

There was an object called globalStorage before where you could have multiple localStorages, but it's been deprecated from the specs

Answer 4

I'd always use a prefix, just to avoid potential collisions with user scripts - which could use localStorage too.

Answer 5

As others have pointed out, localStorage is unique per protocol, host & port. If you want a handy way to control your storage with prefixed keys, I suggest localDataStorage.

Not only does it help enforce segmented shared storage within the same domain by prefixing keys, it also transparently stores javascript data types (Array, Boolean, Date, Float, Integer, String and Object), provides lightweight data obfuscation, automatically compresses strings, and facilitates query by key (name) as well as query by (key) value.

[DISCLAIMER] I am the author of the utility [/DISCLAIMER]

Examples:

// instantiate our first storage object
// internally, all keys will use the specified prefix, i.e. passphrase.life
var localData = localDataStorage( 'passphrase.life' );

localData.set( 'key1', 'Belgian' )
localData.set( 'key2', 1200.0047 )
localData.set( 'key3', true )
localData.set( 'key4', { 'RSK' : [1,'3',5,'7',9] } )
localData.set( 'key5', null )

localData.get( 'key1' )   -->   'Belgian'
localData.get( 'key2' )   -->   1200.0047
localData.get( 'key3' )   -->   true
localData.get( 'key4' )   -->   Object {RSK: Array(5)}
localData.get( 'key5' )   -->   null


// instantiate our second storage object
// internally, all keys will use the specified prefix, i.e. prismcipher.com
var localData2 = localDataStorage( 'prismcipher.com' );

localData2.set( 'key1', 123456789 )  // integer

localData2.get( 'key1' )   -->   123456789

As you can see, primitive values are respected, and you can create several instances to control your storage.

Answer 6

It is available anywhere on that domain as Nick suggested, as an alternative there is sessionStorage works slightly differently in that it is distinct to the browser window itself. That is to say that other tabs or windows on the same domain do not have access to that same copy of the storage object.