227

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?

Nathan Moos
  • 3,563
  • 2
  • 22
  • 27
  • 1
    I'd always use a prefix, just to avoid potential collisions with user scripts - which could use localStorage too. – Benjol Apr 01 '11 at 07:30
  • 3
    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. – Camilo Martin Feb 18 '12 at 04:43

6 Answers6

256

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.

baHI
  • 1,510
  • 15
  • 20
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • 94
    It's unique per `protocol://host:port` combination. – thasmo Feb 03 '16 at 23:48
  • 1
    www.mysite.it:8012/App1 and www.mysite.it:8012/App2 has local storage shared ? – DarioN1 Jun 29 '18 at 10:28
  • 6
    @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'.) – William Jul 12 '18 at 13:36
  • 2
    file:/// protocol stores variables separate for each directory. – sntrcode Apr 04 '21 at 03:41
88

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 8
    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. – baHI Oct 23 '19 at 09:22
  • 3
    +1 for mentioning that "There is no mechanism built into web storage that allows one origin to access the storage of another." – Fabien Quatravaux Nov 26 '19 at 16:47
7

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

Mark Amery
  • 143,130
  • 81
  • 406
  • 459
sebarmeli
  • 17,949
  • 7
  • 35
  • 40
7

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.

Mac
  • 1,432
  • 21
  • 27
0

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

RoninTDK
  • 33
  • 4
-1

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.

Matt
  • 42
  • 1