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?

• Benjol: I'd always use a prefix, just to avoid potential collisions with user scripts - which could use localStorage too.
• Camilo Martin: IMO It's the user scripts who should avoid collisions, not the pages. In my user script I'm using a prefix named after the script.

Answer 1

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.

• thasmo: It's unique per protocol://host:port combination.
• DarioN1: www.mysite.it:8012/App1 and www.mysite.it:8012/App2 has local storage shared ?
• William: @DarioN1 Yes, www.mysite.it:8012/App1 and www.mysite.it:8012/App2 have shared local storage. (Caveat: If you access them from different protocols, EG http vs https, those are not shared. Within the same protocol, subdomain, domain, and port -- they are shared. This is a simplification of the concept of 'Origin'.)
• sntrcode: file:/// protocol stores variables separate for each directory.

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

• baHI: This was greatly written, liked this answer the most as it's easy to read and fully explained, even for those who would just start out development.
• Fabien Quatravaux: +1 for mentioning that "There is no mechanism built into web storage that allows one origin to access the storage of another."
• sigmal: Great answer, thank you. I could not find my storage locally because 127.0.0.1 and localhost are obviously not the same! ... took me 2 days until i found your answer. Thanks

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

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 5

If you want to make it per page, I simply prefix the keys with the href location (I strip out the colons and slashes for good measure):

let pageName = location.href.replaceAll('/','').replaceAll(':','');
sessionStorage[pageName + '_scrollTop'] = $(this).scrollTop();

Taken from full version of my 'restore scroll position' script: https://stackoverflow.com/a/75359943/4885073

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.