Web data storage: Cookie, UserData, SessionStorage, WebSqlDatabase

Web data storage: Cookie, UserData, SessionStorage, WebSqlDatabase

Cookie

It is a standard way to save the state of the client browser. Cookies may have appeared soon after the browser was born. Why do we need cookies? Since the HTTP protocol has no state, a flag/storage is needed to record the current state of the client browser to ensure that the current state of the client browser can be known when the client browser and the server communicate. Cookie is a container that records this state. Cookie is brought back to the server at each request, thus ensuring that the server can know the current state of the browser. Since the cookie will be brought back to the server, the content of the cookie cannot be too much, and cannot exceed 4K at most. The introduction of 4K limit is http://ec.europa.eu/ipg/standards/cookies/index_en.htm
One of the passages reads:

A browser is only required to store up to 300 cookies overall and maintain only the last 20 from each domain. The maximum size of a cookie is 4K of disk space.

However, in some scenarios, it may be necessary to store more than 4K or more data, but this data does not need to be brought back to the server every time a request is made. As long as it can be saved on the customer's browser and can be easily read and written by Javascript, it will be fine. This demand is especially urgent in the application scenarios of medium and large RIAs. Some data is placed in the customer's browser to save bandwidth and increase browsing speed. The HTML5 standard has already provided solutions to meet this need: sessionStorage, webSqlDatabase, and Microsoft's IE has a userData solution.


userData
Microsoft's introduction to USERDATA: http://msdn2.microsoft.com/en-us/library/ms531424(VS.85).aspx
One of the passages reads:

Security Alert：For security reasons, a UserData store is available only in the same directory and with the same protocol used to persist the store.
Security Alert：Using this behavior incorrectly can compromise the security of your application. Data in a UserData store is not encrypted and therefore not secure. Any application that has access to the drive where UserData is saved has access to the data. Therefore, it is recommended that you not persist sensitive data like credit card numbers. For more information, see Security Considerations: DHTML and Default Behaviors.
…
The userData behavior persists data across sessions, using one UserData store for each object. The UserData store is persisted in the cache using the save and load methods. Once the UserData store has been saved, it can be reloaded even if Microsoft Internet Explorer has been closed and reopened.
Setting the userData behavior class on the html, head, title, or style object causes an error when the save or load method is called.

UserData can be accessed in the same directory and with the same protocol and stored on the client machine for a long time. The maximum storage space has also increased a lot. UserData needs to be bound to a Dom element. There is a removeAttribute method in the userData method. After testing the code, I found that the removeAttribute method does not seem to be very useful. It is necessary to use a method like cookie expiration to completely delete a userData Attribute.
It is introduced in http://www.itwen.com/04web/11skill/skill20060918/60588.html that userData is stored in the X:\Documents and Settings\current user\UserData\ directory. MS does not provide specific details in the userData documentation.


sessionStorage
HTML5 standard introduction to sessionStorage: http://www.whatwg.org/specs/web-apps/current-work/
The introduction of sessionStorage:

This specification introduces two related mechanisms, similar to HTTP session cookies [RFC2965], for storing structured data on the client side.
The first is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time.
Cookies don't really handle this case well. For example, a user could be buying plane tickets in two different windows, using the same site. If the site used cookies to keep track of which ticket the user was buying, then as the user clicked from page to page in both windows, the ticket currently being purchased would "leak" from one window to the other, potentially causing the user to buy two tickets for the same flight without really noticing.
To address this, this specification introduces the sessionStorage DOM attribute. Sites can add data to the session storage, and it will be accessible to any page from that origin opened in that window.

Html5 sessionStorage Demo: http://html5demos.com/storage
The following is the test code for IE FF compatible userData according to http://www.blogjava.net/emu/archive/2006/10/04/73385.html:

Copy code
The code is as follows:

function isIE() {
return !!document.all;
}
function initUserData() {
if (isIE()) document.documentElement.addBehavior("#default#userdata");
}
function saveUserData(key, value) {
var ex;
if (isIE()) {
//IE
with (document.documentElement) try {
load(key);
setAttribute("value", value);
save(key);
return getAttribute("value");
} catch (ex) {
alert(ex.message)
}
} else if (window.sessionStorage) {
//FF 2.0+
try {
sessionStorage.setItem(key, value)
} catch (ex) {
alert(ex);
}
} else {
alert("Error occurred in user data saving. Your browser does not support user data.");
}
}
function loadUserData(key) {
var ex;
if (isIE()) {
//IE
with (document.documentElement) try {
load(key);
return getAttribute("value");
} catch (ex) {
alert(ex.message); return null;
}
} else if (window.sessionStorage) {
//FF 2.0+
try {
return sessionStorage.getItem(key)
} catch (ex) {
alert(ex)
}
} else {
alert("Error occurred in user data loading. Your browser does not support user data.")
}
}
function deleteUserData(key) {
var ex;
if (isIE()) {
//IE
with (document.documentElement) try {
load(key);
expires = new Date(315532799000).toUTCString();
save(key);
}
catch (ex) {
alert(ex.message);
}
} else if (window.sessionStorage) {
//FF 2.0+
try {
sessionStorage.removeItem(key)
} catch (ex) {
alert(ex)
}
} else {
alert("Error occurred in user data deleting. Your browser does not support user data.")
}
}

The common feature of userData and sessionStorage is that both objects can store much more content than cookies. And it will not be brought back to the server with each request. However, according to the Html5 standard and tests, it is found that userData and sessionStorage are different in many places.

Here is a test page:
31_110118_jg9ncookieVsStoragegif

The SetInsurance link will operate javascript to write data using userData in IE and sessionStore in FF. The situation under IE is: the written value will not be lost when closing IE or restarting the machine. The situation under FF is very interesting: the value written in this page can be accessed in this page and in other pages opened by this page. But even if this page is open, if you enter the address in the navigation bar and open this page, the stored value cannot be accessed. The values ​​stored in this page are not accessible in its parent page (the page that opened this page). I looked at the Html5 standard again. The full name of sessionStorage is: Client-side session and persistent storage of name/value pairs, which probably means that the content stored in the Client is session-related, and the stored values ​​are maintained by the session. Once the session is interrupted or lost, the stored values ​​will disappear. Therefore, when the page has no session (parent page, the page opened by the address bar), the value cannot be obtained. When FF is shut down or the machine is restarted, the value will inevitably not be obtained.


webSqlDatabase
webSqlDatabase is a very cool thing in the HTML5 standard. You can write SQL queries in Javascript and the database will be in the browser, which was almost unimaginable before. But today Safari, Chrome, and Opera all support it. Here are two demo pages for webSqlDatabase: http://html5demos.com/database http://html5demos.com/database-rollback
W3C's introduction page for WEBSQLDATABASE: http://dev.w3.org/html5/webdatabase/
A concise explanation on Wiki: http://en.wikipedia.org/wiki/Web_SQL_Database

From W3C: "...an API for storing data in databases that can be queried using a variant of SQL"
Web SQL Database is supported by Google Chrome[1], Opera and Safari but will not be implemented by Mozilla(Firefox)[2] who instead propone Indexed Database API access.

I don't know how well HTML 5's SQLDB will be supported by browsers, but sessionStorage seems to be able to basically meet the needs.

<<:  Talk about how to identify HTML escape characters through code

>>:  Detailed explanation of jQuery's copy object

Recommend

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...

How to calculate the value of ken_len in MySQL query plan

The meaning of key_len In MySQL, you can use expl...

Vue implements the product tab of the product details page function

This article example shares the specific code of ...

Reasons why MySQL kill cannot kill threads

Table of contents background Problem Description ...

SQL left join and right join principle and example analysis

There are two tables, and the records in table A ...

Detailed explanation of JavaScript object conversion to primitive value

Table of contents Object.prototype.valueOf() Obje...

Use CSS to switch between dark mode and bright mode

In the fifth issue of Web Skills, a technical sol...

MySQL Oracle and SQL Server paging query example analysis

Recently, I have done a simple study on the data ...

XHTML Web Page Tutorial

<br />This article is mainly to let beginner...

How to set Nginx log printing post request parameters

【Foreword】 The SMS function of our project is to ...

Docker-compose image release process analysis of springboot project

Introduction The Docker-Compose project is an off...

How to build a DHCP server in Linux

Table of contents 1. Basic knowledge: 2. DHCP ser...

Linux editing start, stop and restart springboot jar package script example

Preface In the springboot configuration file, the...

Example of ellipsis when CSS multi-line text overflows

Ellipses appear when multi-line text overflows Th...

Swiper.js plugin makes it super easy to implement carousel images

Swiper is a sliding special effects plug-in built...