Search in Habra did not give a similar article, so I dare share with those who are not yet aware
Many of you have faced the problem of storing data on the client. First of all, cookies come to my head, but the data storage restriction of no more than 4kb does not make everyone happy, today if I may let you tell you how to store about 100kb on the client using Java Script.

The HTML5 specification describes several techniques for storing data on a client without using cookies. Consider some of them or their alternatives in more detail:

The sessionStorage attribute

This method is supported by Firefox since version two. This is a global object that is stored in the current session of the document and is stored while the document is open, reloaded or restored, but opening a new window or tab with the same address will generate a new session.
Example of use:

sessionStorage.text = “Habr remembers you,% username%” ;
alert ( “UFO:„ + sessionStorage.text);
* This source code was highlighted with Source Code Highlighter .

The disadvantage of this approach is that it cannot spread to other pages or windows, and works only in the limit of its session.
')

globalStorage

Due to the fact that HTML5 is still developing in Firefox there is a global object globalStorage, which allows you to store data in the browser for a long period of time without being tied to a session, which allows you to use and manipulate the saved data when opening a new window, tab, closing / opening a browser . Binding storage of this kind is carried out by domain.
Example of use:

// Initialize the repository
storage = globalStorage [ “habrahabr.ru” ];
// write the value
storage [ 'hello' ] = 'Hi habrahabr!' ;
// Display the value
alert (storage [ 'hello' ]);
// If necessary, delete
delete storage [ 'hello' ];

* This source code was highlighted with Source Code Highlighter .

This approach allows us to save up to 5 megabytes of information on a client in a specific domain, and use our storage within the domain and its subdomains. That is, it will act like habrahabr.ru , antyrat.habrahabr.ru , etc.

userData

But all that has been described above affects only Firefox (Gecko) browsers, what about IE?
Small-scale went the other way, but did not limit the developers to the excellent possibility of cookies.
Data storage on the client in the donkey is done by working with behavior. Specifications for working with this can be read here , but for now we will consider an example:

<! - First we need an item in which we will store data ->
<span id = "customStorage" > </ span>
<! - Next, we need to initialize our repository ->
<script language = "javascript" type = "text / javascript" >
if ( document .getElementById ( 'customStorage' )) {
storage = document .getElementById ( 'customStorage' );
storage.addBehavior ( "# default # userData" );
storage.load ( "habr" );
// Initialization has passed and now we can already work with our repository
storage.setAttribute ( “hello” , “Habraprivet!” ); // Set our variable
storage.save ( "habr" ); // And save it
// Now you can display the result
alert (storage.getAttribute ( "hello" ));
}
</ script>
* This source code was highlighted with Source Code Highlighter .

Also, our store as well as in cookies, you can set the time of life, but if necessary, you can read about how to do this.

Client-side Database Storage

The WebKit developers (Safari) came close to the HTML5 recommendations and made it possible to create a database on the client.
Let's go straight to the example:

// open our database
db = openDatabase ( "habrahabr" , "1.0" );
// Create a table if it does not already exist
db.transaction ( function (tx) {
tx.executeSql (
“CREATE TABLE IF NOT EXISTS habr (id TEXT, hello TEXT, unique (id))” , // Query to the database
[], // Here, if necessary, we transfer variables to our request; they replace the characters "?" In our request. in order
function (tx, result) {}, // processing if successful
function (tx, error) {alert ( “UFO:„ + error.message); } // processing in case of failure
)
});
// write the value
db.transaction ( function (tx) {
tx.executesql ( “insert into habr (id, hello) values ​​('1', 'Habri hi!')” , [],
function (result) {},
function (tx, error) {alert ( “UFO:„ + error.message); });
});
// Enter the result
db.transaction ( function (tx) {
id = 1;
tx.executesql ( “select hello from habr where id =?” , [id], function (result) {
// Display the result
alert (result.rows.item (0) .hello);
}, function (tx, error) {alert ( “UFO:„ + error.message); });
}); * This source code was highlighted with Source Code Highlighter .

The disadvantage of this approach is that the database can only work within the domain. Subdomains are not supported.
A lot of information about this is not found, here is this example of digging.

Local SharedObject

Opera users are the least fortunate of all, none of the above examples, the opera does not support, so you need to resort to tricks.
Starting with Flash Player 6.0.40.0, Flash supports Local SharedObject, here we will use it and we will.
How it looks from ActionScript:

// Create Local SharedObject
theLocalSharedObject = sharedobject.getLocal ( “habra” );
// Store the value
theLocalSharedObject.data.hello = “Habraprivet” ;
theLocalSharedObject.flush ()
// Get the value
hello = theLocalSharedObject.data.hello; * This source code was highlighted with Source Code Highlighter .

I’m not very strong in a flash, and now I don’t have the means to describe this method in more detail, so I’ll tell you the essence, all you need is to create a Flash <=> JS interaction bridge, to communicate with each other so that it is easy to transfer parameters flush and take them from his vault. This method is valid for the entire domain. Restrictions on size depends on the user's settings, the default is 100 kilobytes.

Silverlight Isolated Storage

If the user has Silverlight installed then you can use the Isolated Storage object. The specification for it can be found here .
Again, now there is no possibility to describe this method in more detail.

---

As a result, we received a means of storing information on the client in the amount of 100kb. You can use it for any purpose.
At the moment I am writing a cross-browser data storage script on the client, which would be able to synchronize the storage in browsers through a flash. A record read without a flash or when access is denied to use the built-in functions of browsers. If the article seems interesting then I will post this lib.

PS: Please do not kick much for the post, as this is my first post on Habré.
PPS: Do you also have this bad habit of highlighting text before reading?

UPD : The donquijote user provided a link to a script that is trying to implement the described mechanism, the only drawback I think is that when opening another browser, the data is transferred only if it was eaten, and there and there the storage worked via flash. In my article, I forgot to take into account 2 more very powerful data storage mechanisms on the client, this is Adobe AIR and Google Gears , the implementation of the latter is in the above script, thanks to shamaniac for the hint.