Local storage. LocalStorage on your fingers. HTML5 storage in action

From web applications such as Google Wave, Gmail, etc. we can see that client side data caching is a good idea for most web applications. Think for yourself, for mobile internet volume is very important. Similar queries in 70% of cases (I did not do any calculations, just expressing arguments in percentages is much more solid) return the same data. In addition, you can cache not only the data, but the application itself.

Until now, the most popular method for local storage has been cookies. Cookie is a key-value pair that is stored locally in text file (4KB or 20 maximum key-value pairs (IE) for one domain). In addition, cookies are transmitted to the server for any HTTP request to the server, even with AJAX. It is natural that the standard should have appeared means for more practical data storage in the browser.

Of all the HTML5 spec, client-side local data stores are probably one of the most talked about topics. There are both positive and negative opinions. Of the minuses, the most significant is a violation of the concept of data relevance for all users, i.e. the way it works now: the user visits the site and sees latest version a web application that all other users see. However, with the correct use of local storage and timely data updates, these problems can be avoided.

So, client-side storage is divided into 3 principle methodologies:

1. Session storage.
2. Local storage or Global Storage

Let's take a closer look at each of them:

1. Session storage - session storage

Session storage is more convenient than cookies. With different implementations max. the limit can be of the order of several Mbps. Unlike cookies, session data is not sent on every request.
Benefits: When requested, the payload is minimal.
Here's an example of a session storage:

SessionStorage.setItem ("userName", "taranfx"); // define a session variable alert ("Your name is:" + sessionStorage.getItem ("userName")); // check access alert ("Hello" + sessionStorage.userName); // another method of accessing the session variable sessionStorage.removeItem ("userName"); // delete the variable at the end

2. Local storage - local storage

The LocalStorage JavaScript object is functionally identical to the sessionStorage object. They differ only in life expectancy and scope. Scope: data in localStorage is accessible through all browser windows, while sessionStorage data is limited to the window in which it was created.
Global memory storage is set by the browser, websites can use it to store persistent data that shouldn't be sent to the server. Data is available by JavaScript and Flash. This can be very handy for Flash games.

GlobalStorage [""]. Foo \u003d "bar"; // foo will be available on any globalStorage website ["ru"]. foo1 \u003d "bar1"; // foo1 will be available on sites "..foo2 \u003d" bar2 "; // foo2 will only be available on the site

When storing data locally, the specification has been rewritten to be more secure. Those. now the data is automatically linked to the domain.
Duration of validity: When stored in Local Storage, the data is retained even after the tab / window / browser is closed.

Here's how you can do it:

LocalStorage.setItem ("userName", "taranfx"); // define a variable in localStorage alert ("Your name is:" + localStorage.getItem ("userName")); // access to it alert ("Hello" + localStorage.userName); // access it differently localStorage.removeItem ("userName"); // delete it at the end

3. Database Storage - storage in a database

So far, we've discussed key-value-limited stores. But when you are dealing with large amounts of data, better base data haven't come up with anything yet. Browsers use SQLite database, which works without additional processes and servers. With only minor restrictions, for example, no foreign key.

But as a reward, you get a complete SQL database. And work with it is carried out in SQL.

Hi everyone! In this article we will analyze what is localStorage and how to use it.

Introduction

LocalStorage - local storage. Those. this is a specially designated place in the browser (something like a small database) where we can write, read and delete some data. In fact, local storage is very similar to COOKIEbut there are differences. Let's talk about them. Cookie very limited. One cookie maybe everything 4096 characters, and their number per domain is approximately 30-50 depending on the browser. In local storage, we can store 5-10mb or even more for a long time.

Where to use them

The biggest difference cookie from localStorage - this is that the first works with the server, and the second does not, although this can also be done, but more on that later. Use local storage where you do not need close work with the server, but you need to store some temporary data. For example, let's say you are creating some kind of web application where a person can go, enter several tasks that he wants to do in a day and delete those that he has already completed. Why do we need a server here? That's right, there is nothing. This is where you should use localStorage... A person enters, enters tasks, they are recorded in a special place in his browser and are stored there. When a person enters again after a while, they will be selected and shown from there. For example, clicking on a task will remove it from local storage and, therefore, will no longer be shown to him. Let's move on to how to use it.

How to use localStorage

The data is stored in the same way as in cookie - key: value... To add a new value, write like this:

LocalStorage.setItem ("key", "value");

We use localStorage object and his method setItem, where we pass the key and value.

To get the data, write the following:

Var value \u003d localStorage.getItem ("key");

As a result, into the variable value will get the value that is stored under the key that we pass to the method getItem.

Deleting data

LocalStorage ("key"); // delete the data under the passed key
localStorage.clear (); // clean up local storage completely

To check if the local storage is full, you can use the constant QUOTA_EXCEEDED_ERR

Try (
localStorage.setItem ("key", "value");
) catch (e) (
if (e \u003d\u003d QUOTA_EXCEEDED_ERR) (
alert ("Limit exceeded");
}
}

That's all there is to know about localStorage... It is worth saying that in addition to this object, there is one more - sessionStorage... It differs only in that it stores data for only one tab, and they will be deleted as soon as the user closes the tab.

At the beginning of the article, I said that local storage created in order to store local data and not communicate with the server, but, however, we still have such an opportunity. I think some might already have guessed how to do this. So, if you need to send some data to the server, then do the following: get data from local storage, convert it to Json string and send using technology Ajax... You can also receive them from the server.

Outcome

So use localStorage where you do not need to communicate with the server, but need to store data locally, in the user's browser. We have covered everything you need for this in this article. Thank you for your attention and see you soon!

The Web Storage API provides mechanisms by which browsers can store key / value pairs, in a much more intuitive fashion than using cookies.

Web Storage concepts and usage

The two mechanisms within Web Storage are as follows:

• sessionStorage maintains a separate storage area for each given origin that "s available for the duration of the page session (as long as the browser is open, including page reloads and restores)
  • Stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
  • Data is never transferred to the server.
  • Storage limit is larger than a cookie (at most 5MB).
• localStorage does the same thing, but persists even when the browser is closed and reopened.
  • Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache / Locally Stored Data.
  • Storage limit is the maximum amongst the three.

Specifications

Browser compatibility

Window.localStorage

https://github.com/mdn/browser-compat-data and send us a pull request.

Legend

Window.sessionStorage

The compatibility table on this page is generated from structured data. If you "d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Legend

Private Browsing / Incognito modes

Most modern browsers support a privacy option called "Incognito", "Private Browsing" or something similar that doesn "t store data like history and cookies. This is fundamentally incompatible with Web Storage for obvious reasons. As such, browser vendors are experimenting with different scenarios for how to deal with this incompatibility.

Most browsers have opted for a strategy where storage APIs are still available and seemingly fully functional, with the one big difference that all stored data is wiped after the browser is closed. For these browsers there are still different interpretations of what should be done with existing stored data (from a regular browsing session). Should it be available to read when in Private mode? Then there are some browsers, most notably Safari, that have opted for a solution where storage is available, but is empty and has a quota of 0 bytes assigned, effectively making it impossible to write data to it.

Developers should be aware of these different implementations and take them into account when developing websites depending on Web Storage APIs. For more information please have a look at this WHATWG blog post that specifically deals with this topic.

Making a to-do list app is usually the first app you make when learning JavaScript, but the problem with all these apps is that when you reload the page, all of those to-do lists disappear.
There is a simple solution - using local storage. The advantage of local storage is that you can save bits of data on the user's computer, and when the page is reloaded, all the task lists remain in place.

What is local storage?

Local storage is part of the storage network, which itself is part of the HTML5 specification. There are two options for storing data in a specification:

• Local Storage: Stores data without an expiration date, and this is the option we'll use because we want our lists to stay on the page as long as possible.
• Session Storage: only stores data for one session, so if the user closes the tab and reopens it, all his data will be lost.

In simple words, all that web storage does is store key / value pairs with a name locally, and unlike cookies, this data is saved even if you close your browser or turn off your computer.

If we're thinking about a to-do list, then you need the following:

• Entrance, where we can place our list
• Enter button to add a list
• Button to clear the entire diary
• An unordered list container where our list will be placed in a list of items
• Finally, we need a DIV container to show a notification when you try to enter an empty task.

Thus, our HTML should look something like this: