Cookies, Localstorage and Sessionstorage

1. Cookies, Localstorage and sessionstorage the same point
   • are stored locally on the user's data.
   • The point is to avoid data being passed back and forth unnecessarily between the browser and the server.    
2. The characteristics of the three people

the same	Web Storage that belong to HTML5
features	Cookies	Localstorage	Sessionstorage
The lifetime of the data	can set the expiration time, default is to close the browser after the failure	Save permanently unless cleared	Only valid under current session, cleared after closing browser
Store data size	4k/files * Maximum of 20	>5mb/site	>5mb/site
Communication with server-side	each time it is carried in the HTTP header , if using cookies to save too much data can cause performance problems	Store only in the client (ie, browser) and do not participate in communication with the server	Store only in the client (ie, browser) and do not participate in communication with the server
Ease of Use	Requires the programmer to encapsulate itself, the source of the cookie interface is unfriendly	The source interface is acceptable and can be encapsulated again for better support of object and array	The source interface is acceptable and can be encapsulated again for better support of object and array
Accessibility of data	Shared in different browsers, in different windows	The same browser , different windows in the same site can be shared	Only the same page window can be shared
Often used in	Remember the password,		Shopping Cart Cache

• The difference between Web storage and cookies

The concept of WEB storage is similar to a cookie, except that it is designed for larger capacity storage. The size of the cookie is limited, and every time you request a new page, the cookie is sent past, which virtually wastes bandwidth, and the cookie needs to specify the scope and cannot be called across domains.
In addition, WEB storage has methods such as setitem,getitem,removeitem,clear, unlike cookies that require front-end developers to encapsulate Setcookie,getcookie themselves.

WebStorage browser support is as follows:

In practice this can be switched using:

var strstoredate = window.localstorage? Localstorage.getitem ("Menutitle"): Cookie.read ("Menutitle");    

• Cookies

There are 2 types of cookies. When the browser is running, the cookie can be stored in RAM (referred to as the Session cookie), and once the user exits from the site or server, the cookie can be stored on the user's local hard drive (this cookie is called persistent Cookies).

When the Web server has created cookies, as long as the user accesses the same Web server during its validity period, the browser first checks the local cookies and sends them as-is to the Web server. So the content of the cookie should be few but good .

Some browser users may disable cookies.

It's easy to see the cookies issued by a website. Enter Javascript:alert (document. cookie) in the browser's address bar.

For detailed cookies See http://blog.csdn.net/fangaoxin/article/details/6952954/

• Localstorage

The data stored by the Localstorage method has no time limit. Data is still available after the second, second, or next year.

The same site share a 5M localstorage, stored in the browser sqlite, accessed through the Window.localstorage object.

Localstorage stores a key-value pair (similar to a dictionary) value that must be stored in a string format (the array can be stored directly, the object is stored in JSON format, and the last read is a string).

Create, read localstorage:

<script type= "Text/javascript" >

var num=[1,2,3,4];localstorage.numlist=num;//lastname field must be unique, the same site page can override your value based on the same name document.write ( localstorage.numlist);//1,2,3,4 because Localstorage is stored as a string

</script>

Localstorage tutorial See also: http://www.zhangxinxu.com/wordpress/?p=1952

• Sessionstorage

Similar to Localstorage, key-value pairs are stored.

The difference is that it exists only on the same page, the page closes and then opens, but it fails when the browser window is closed.

Accessed through the Window.sessionstorage object.

Reference:

Http://www.jb51.net/html5/144597.html

Http://www.w3school.com.cn/html5/html_5_webstorage.asp

Cookies, Localstorage and Sessionstorage