There are four common types of local storage on the browser

• cookie
• LoacalStorage (New local storage mechanism for Web HTML5)
• SessionStorage (Web HTML5 new local storage mechanism)
• indexedDB

Cookie:

Session tracking techniques: Cookies and Sessions

Background and Principle:

With the development of the Internet, how to identify users has become a problem. Previously, this problem was solved by putting some parameters on the URL or hiding the form. The advent of cookies as part of the HTTP specification provides a better solution to this problem.

The basic working principle is that cookie requires the server to set set-cookie, and then the browser receives the cookie and stores it locally. When sending a request next time, the browser will automatically bring the cookie that can be sent back to the server, thus realizing session tracking.

Set-cookie can set only one name at a time. If you want to set multiple names, set-ccokie writes multiple lines. If you want to change the value of the cookie, you can just reassign it, but keep all the properties exactly the same, otherwise new cookies will be generated.

Cookie properties:

• Name: indicates the name of the cookie. It is case insensitive and must be URL-encoded
• Value: the value must be url encoded
• Expiration date: Cookies within this expiration date can be sent
  • Expires (HTTP1.0) : Is a point in time (in GMT format) when the cookie expires
    • The set time is the previous: delete cookies
  • Max-age (HTTP1.1) : Replaces Expires. Is a time period in seconds. That is, time to fail = time to create + seconds.
    • 0: deletes cookies
    • -1: temporary cookie. The cookie is deleted after the browser closes. The default value is temporary cookie
    • Positive: the value will not be cleared automatically as long as it is valid within the validity period
• Path: sends cookies in this path only to the server.
• Domain: indicates the domain for which the cookie is valid.
• Secure: Transfers cookies only if SSL is used (HTTPS). Cookies are not encrypted

Url encoding: decodeURLCompontent can be used to decode, corresponding to encodeURICompontent encoding

Limitations on cookies:

• It’s codomain constrained

• The number of cookies stored varies depending on the browser. Generally, the number is 20

  • IE6 and below: up to 20
  • After FirFox + IE7: limit the number of domains to 50
  • Opera: up to 30
  • Safari and Chrome: No hard and fast rules

• Content size limits vary from browser to browser, typically 4k

Browsers will clear past cookies, IE and Opera will clear the least recently used cookies, but Firfox seems to be doing it at random, so it’s important to consider cookie limits to prevent unexpected consequences

The service side set – cookies:

HTTP/1.1 200 OK Content-Type :text/ HTML set-cookie: name=value; HTTP/1.1 200 OK Content-Type :text/ HTML set-cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure;Copy the code

This header specifies a cookie named Name that will expire at Mon, 22-Jan-07 07:10:24 GMT and will be valid for all pages (PATH) of wrox and subdomain p2p.wrox.com. And it can only be transmitted over an SSL connection.

Domian, Path, Expires, and Secure are all directives the server gives the browser to specify when cookies should be sent. These parameters are not sent as part of the cookie message sent to the server; only name=value is sent

Read and write cookies in js:

• Read: Documen.cookie. What is obtained is the cookie of the whole domain, and a single cookie should be obtained through its own encapsulation method

• Set: The format is the same as set-cookie. You can change it only if it is exactly the same. Otherwise, a new cookie will be generated.

• Delete: Sets the expiration date to expires or max-age.

A cookie:

To get around cookie limitations, some developers use child cookies, namely name=name1= Value1&name2 =value2. All the same except that the method of obtaining the package is more troublesome.

Summary (!!) :

Cookies are mainly used for session tracking technology, which can identify the user who made the request.

Cookies are easy to be stolen, so try not to store important information such as bank card number, and the larger the information stored in cookies, the number and content limit varies with different browsers, but most content size limit is 4K, the number is 20. The longer it takes to complete the server, the worse the performance.

It needs the cooperation of the server to set set-session (where the attributes PATH, Domain, Expires, and Secure simply indicate to the browser when to send a cookie). Cookie By default, if the browser is closed, it will be cleared. You can set the validity period for local persistence of cookies.

When server HttpOnly is set to true, JS cannot read cookies to prevent XSS vulnerability. Keep all properties exactly the same when changing values, otherwise new cookies will be generated.

The name and value of cookies need to be decoded.

SessionStorage and localStorage

H5 new method, but IE8 above all compatible. Both methods have the same read and set methods and are subject to the same origin restriction. The only difference is that localStorage validity period is unless manually deleted, while sessionStorage is a reference to the server session, browser closed to clear, refresh will not.

read

• getItem(xx)
• localStorage.xx
• Key (index) : The name of the value that gets the index position

Set up the

• SetItem (xx, 123)
• localStorage.xx = 123

delete

• removeItem(xx)
• Clear () Firfox is not implemented
• delet

Events:

A modification to a storage object triggers the storage object. The event object that deletes and sets the event has the following properties:

• Domain: domain name of the changed storage space
• Key: indicates the name of the key to be set or deleted
• newValue
• oldValue

EventUtil.addHandler(document, "storage", function(event){
    alert("Storage changed for " + event.domain);
});
Copy the code

Size limit

Different browser vendors limit the size of the cookie, which is larger than 5M

• localStorage
  • Chrome and Safari: 2.5M
  • Safari for ios and WebKit for Android: 2.5m
• sessionStorage
  • IE8+、 Opera ：5M
  • Chrome, Safari, Safari for ios, WebKit for Android: 2.5m

The period of validity

• LocalStorage: unless manually deleted
• SessionStorage: clear when the browser is closed, but refresh does not affect

LocalStorage is an alternative to globalStorage (Firfox2).

The current domain storage sessionStorage and localStorage as well as cookies can be seen in application in Google’s console

IndexedDB

IndexedDB can be used if the data volume is too large, instead of Web SQL (deprecated).

• Supports search and query, can store more data. Not less than 250 MB
• The onError and ONSuccess event handlers are registered each time.
• Key-value pair storage
• Support transactions: There is no case for rewriting parts
• Same-origin restriction: Cannot access databases across domains
• Support binary storage

IndexedDB: IndexedDB: IndexedDB: IndexedDB: IndexedDB: IndexedDB

To compare

The local store	cookie	localStorage	sessionStorage	indexedDB
The size of the	4k	5M	5M	250MB
The same-origin restrictions	There are	There are	There are	There are
The period of validity	The validity period is valid	Unless manually cleared	Browser Closed clear	–
features	It is carried in HTTP headers every time, affecting performance	Only local to the browser	Only local to the browser	Asynchronous, supports search and query, index building