Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

Is localStorage based on domain?

As you may know, LocalStorage is domain based. You can't read or write from localstorage that's on different domain, even if that's subdomain. But there is iframe trick that you can use to store data from domain to it's subdomain.

What is localStorage in HTML5?

HTML5 local storage is a component of the Web storage application programming interface. It is a method by which Web pages locally store named key/value pairs inside a client's Web browser.

How does HTML display localStorage data?

“how to display local storage data in html” Code Answer's Just go to the developer tools by pressing F12 , then go to the Application tab. In the Storage section expand Local Storage. After that, you'll see all your browser's local storage there.


It's per domain and port (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.


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://example.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.


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.


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