Local Storage is storage that provides an internet browser to a website. As with cookies, data is stored in the form of a key – value. However, the significant difference is that cookies send their data in each HTTP request. Data in Local Storage is only available on the client via JavaScript. There is no limit to the number of keys and the data does not expire. In addition, data is shared between multiple windows of the same browser, which does not apply to data in cookies unless this functionality is provided by the server.
Local Storage has several names. If you read about DOM storage or Global storage, they are the same thing (in the case of Global storage, you are just reading the old specification). The userData persistence technique is a slightly different earlier implementation of the same idea in IE, available since version 6. On the other hand, SQL storage or Google Gears refer to a local database, available via JavasScript, with SQLite database functionality. Collectively, these techniques are called Offline Storage and are part of the HTML5 specification.
So that was just to clarify and I won't keep from the most important thing:
if (localStorage) {
var data1 = 'zapamatováníhodná data';
var key = 'data';
localStorage.setItem(key, data1);
var data2 = localStorage.getItem(key);
}The magic object that makes the desired functionality available is called localStorage. Its methods are described in the following table.
| Return Type Method | Arguments | Description | |
|---|---|---|---|
| Void | localStorage. Clear | () | Deletes all content |
| Void | localStorage.setItem | (string key, string value) | inserts a keyed element |
| String | localStorage.getItem | (string key) | returns the element under the key |
| Void | localStorage.removeItem | (string key) | removes the keyed element |
| String | localStorage.key | (int order) | Returns the name of the nth key |
| Int | localStorage.length | Returns the number of keys | |
| Int | localStorage. remainingSpace | Returns the number of free bytes |
Data written from a website from one domain is not available to pages on other domains. Internet Explorer provides 10 MB of domain space, Firefox 5 MB and Opera 3 MB. The allocation of more space must be confirmed by the user. The remainingSpace method returns the number of free bytes on the disk or in the quota, not the number of bytes that can still be written before the user is prompted to allocate more space.
Although the implementation of Local Storage may be good on the part of the browser, it is no more reliable storage than a cookie. All the user has to do is install a newer version of the OS or change the browser, and the data will be lost. Still, Local Storage is perfect for nice-to-have features. If the functionality is missing, nothing happens, the user just won't have as much comfort.
For inspiration, I will describe one of the possible uses of Local Storage that changes the way of accessing information on the blog and which is implemented here. It often happens that a blog article needs to be edited. Either new additional information about a technology is available, or it is perhaps an invitation to a conference and it is necessary to let it be known that the keynote speaker will not be present because of volcanic dust in the atmosphere, which clogs the cooling vents of aircraft engines (by the way, the cabin is overpressurized by them). Usually a new article is published that contains additional information. The old article is already marked as read in users' RSS readers and will not be displayed again if RSS is not used correctly. An old article sometimes refers to more recent information, sometimes not. In both cases, it confuses the user, less in the first and more in the second. Another problem is distinguishing the new text from the old one. Although HTML takes this into account and allows you to cross out old text, it is very difficult to make a change so that the article can be read smoothly and at the same time the user can see at a glance what has changed.
That’s why I decided to save the user the effort and remember the content of the articles for him. Thus, after some time spent on the page, which roughly corresponds to the time needed to quickly read the article, the text of the article is stored in the Local Storage. If the user visits the article again, the JavaScript compares the text of the saved article with the text on the page and highlights the edited or added paragraphs. For example, on this blog, a vertical bar appears to the right of the paragraph that says Edited.
A suitable algorithm must be used to compare the text. Full counting of changes is computationally demanding and a mere hash will not know whether only a typo has been corrected or a new sentence has been inserted. That’s why I chose the Sift3 algorithm by Siderit Zackwehdex, which counts differences only in a certain neighborhood, which significantly reduces the number of comparisons.
An essential part of this solution is the correct consumption of articles by the feed generator. In the case of RSS, it is necessary to make sure that in the element <item> representing the article, the content of the element <guid> will change after the article is updated. The URL of the article is usually inserted into this element and it is taken into account by default. However, it is not wrong to use <guid isPermaLink="false"> and insert, for example, a hash calculated from the URL of the article and the date of change, or to insert the date of change into the query segment of the URL. Just so that the RSS reader knows that the article has been edited. RSS, unlike the Atom format, does not know the <updated> element.
On technical blogs, there are usually more articles on one technology. If the articles are not bound into a series and there are no links to newer episodes below the article, it is difficult to find related information. Authors, fearing that no one will notice the new content in the old article, prefer to write a new article. Local Storage allows you to easily eliminate this ailment.