• By Todd Anglin
  • Translator: Front sun
  • Source: htmlui.com/blog/2011-0…

LocalStorage is an easy-to-use API in HTML5 that provides Web developers with an easy-to-use 5MB storage space. Using the LocalStorage API really couldn’t be simpler. Take a look:

//Save a value to localStorage
localStorage.setItem('key'.'value to save');
//OR
localStorage.key = 'string value to save';

//Get the value back out of localStorage
localStorage.getItem('key');
//OR
localStorage.key;

//Clear all localStorage values
localStorage.clear();
Copy the code

The localStorage apis are very simple, but it’s easy to overlook some important details about them. Here are five things you may not know (or may have forgotten) about this simple API:

1. The LocalStorge value on the Secure (SSL) page is isolated

According to the draft specification, browsers isolate LocalStorage values based on protocol + host name + unique port (also known as HTML5 Origin). Host name isolation is what we expected because we don’t want malicious sites accessing our site’s LocalStorage data. But why are protocols also isolated (that is, HTTP and HTTPS)?

The result of this isolation means that the values of LocalStorage saved to http://htmlui.com cannot be accessed from the pages of https://htmlui.com (and vice versa).

So be careful if your site offers both HTTP and HTTPS pages. (Note: Firefox provides a proprietary GlobalStorage that does not have this HTTP/HTTPS isolation.)

2. The SessionStorage value persists after some browsers restart

SessionStorage, unlike LocalStorage, is not designed for long-term storage of values in the user’s browser. Instead, the values in SessionStorage are destroyed at the end of the browser session, which is usually when the browser window closes.

There was one exception.

When the browser provides a “Restore session” feature, usually designed to help the user recover quickly from a browser/computer crash, the values in SessionStorage will also be restored. Thus, while it is a new “session” on the server, from the browser’s point of view, it is a continuation of a single session after the browser restarts.

This makes SessionStorage an ideal storage technology for temporarily “backing up” user form values, saving input to SessionStorage as input, and restoring (if present) when the page loads, To further help the user recover from a browser crash or unexpected page refresh (although the browser does some of this itself, especially when recovering from a crash).

3. The LocalStorage value created in Incognito mode is isolated

When you start the browser in private/incognito/safe mode (sometimes more roughly and accurately called “SE situation mode”), it creates a new temporary database for LocalStorage values. This means that any content saved to LocalStorage is destroyed when the private browsing session is closed, making LocalStorage behave more like SessionStorage.

In addition, since the browser’s “Session Recovery” feature does not reopen private mode sessions, any content created in SessionStorage will also be lost after the browser window closes. In fact, in short, any data put into Local or SessionStorage during a private browsing session will be lost immediately after the browser window closes (intentionally or unintentionally).

4. The LocalStorage quota cannot be larger than 5MB

LocalStorage should not be the primary form of in-browser storage in HTML5 (IndexDB is), but some applications may require more than 5m of memory from LocalStorage. Is there a way to expand the LocalStorage quota? No, no, forget it, you’re thinking Peach.

But there is also a sidetrack!

Technically, LocalStorage does not prevent subdomains of the same host (using the same protocol and port) from accessing its LocalStorage objects. As a result, some browsers have disclosed a workaround by granting “a1.website.com” and “a2.website.com” their own 5MB LocalStorage quota. And because both sites are from the same source, they can access each other’s values. (Security note: This also means that sites on a shared domain, such as Apphost.com, all share an HTML5 storage object. Please operate with caution!

Therefore,, while a technical solution exists, it is specifically frowned upon in the HTML5 Web storage specification.

But so far only Opera has implemented this part of the specification. So right now, 5MB is your realistic limit.

5. LocalStorage can be filled in old browsers (including Internet Explorer)

Ah, older browsers (IE, in particular) are the losers at every HTML5 party. Fortunately, advanced browsers support LocalStorage very well. It in IE8 + (!) , Firefox 3.5+ and Chrome 4+. Few HTML5 specifications are as widely and consistently supported as Web storage.

For older versions of IE, polyfill support is available, thanks to an IE-Only feature called “userData”. The introduction of userData in IE5 is an IE action that opens up 1MB of local storage. By wrapping the userData API, modern HTML5 applications can handle polyfill LocalStorage all the way to IE6 (or IE5, technically).

So enjoy the simple LocalStorage API, but be aware of the internal workings that can cause some confusing debugging.

communication

The article continues to update every week, can be wechat search front sunshine first time to read and urge more (one or two earlier than the blog yo), in addition to pay attention to the public account, background reply add group, e-books, you can get a lot of benefits, you know.