CODEWITHSUNDEEP
javascripthtmllocal-storage
Nathan Moos
Nathan Moos

Reputation: 3643

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

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?

Upvotes: 235

Views: 113412

Answers (6)

RoninTDK
RoninTDK

Reputation: 33

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

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630349

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.

Upvotes: 265

T.J. Crowder
T.J. Crowder

Reputation: 1073968

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.

Upvotes: 95

Mac
Mac

Reputation: 1566

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.

Upvotes: 7

sebarmeli
sebarmeli

Reputation: 18265

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

Upvotes: 7

Matt
Matt

Reputation: 42

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.

Upvotes: -1

Related Questions