Several local caching mechanisms at the front

In the long front-end development process, we commonly used several local caching mechanism: Cookie,localstorge,sessionstorge

the characteristics of 1.Cookie

1 The size of the cookie is limited, the cookie size is limited to 4KB, and cannot accept large data like large files or emails.

2 Whenever a request involves cookie,cookie, it will be sent back and forth between the server and the browser (this explains why local files cannot test cookies). and cookie data is always carried in a homologous HTTP request (even if it is not needed), which is an important reason why cookies cannot be too big. Orthodox cookie distribution is implemented by extending the HTTP protocol, and the server prompts the browser to generate the appropriate cookie by adding a special line of instructions to the HTTP response header.

3 users each request server data, cookies will be sent to the server with these requests, Server scripting language such as PHP can handle cookies sent data, can be said to be very convenient. Of course, the front-end can also generate cookies, with JS to the operation of cookies is quite cumbersome, the browser only provides document.cookie such an object, to the cookie assignment, access are more troublesome. In PHP, we can set cookies by Setcookie (), and $_cookie This super global array to get cookies. The contents of the cookie mainly include: name, value, expiration time, path and domain. A path, together with a domain, forms the scope of the cookie. If you do not set an expiration time, the lifetime of this cookie is the period of the browser session, the cookie disappears when the browser window is closed. This lifetime is known as a session cookie for a browser session-time cookie. Session cookies are generally not stored on the hard disk but are kept in memory, although this behavior is not regulated by the specification. If the expiration time is set, the browser saves the cookie to the hard disk, closes it and opens the browser again, and the cookies are still valid until the expiration date is exceeded. Cookies stored on your hard disk can be shared between different browser processes, such as two IE windows. For cookies stored in memory, different browsers have different ways of handling them.

2. session

When it comes to cookies, you can't say session.

Session mechanism. The session mechanism is a server-side mechanism in which the server uses a structure similar to a hash table (or perhaps a hash table) to hold the information. When a program needs to create a session for a client's request, the server first checks to see if the client's request already contains a session ID (called a session ID.), or if it has already been previously created for this client, The server retrieves this session using the sessions ID (not retrieved, creates a new one), creates a session for this client, and generates an event ID that is associated with the session if the client request does not contain a session ID. The value of the session ID should be a string that is not duplicated and is not easy to be found, and will be returned to the client for saving in this response. This session ID can be saved in a cookie, so that the browser can automatically send the identity to the server according to the rules during the interaction. Generally this cookie's name is similar to Seeesionid. However, cookies can be artificially prohibited, and there must be other mechanisms to pass the session ID back to the server when the cookie is blocked. One technique that is often used is called URL rewriting, which is to attach the session ID directly behind the URL path. For example: http://damonare.cn?sessionid=123456 also has a technique called form hidden fields. The server will automatically modify the form and add a hidden field so that the session ID can be passed back to the server when the form is submitted. Like what:

1 2 3 4

<form name= "Testform" action= "/xxx" > <input type= "hidden" name= "SessionID" value= "123456" > <input type= "Text" > </form>

In fact, this technique can be simply replaced by applying URL rewriting to the action. 3 Cookie and session simple comparison

The difference between a cookie and a session:

1 The cookie data is stored on the client's browser and the session data is placed on the server.

2 cookies are not very secure, others can analyze the cookies stored locally and make cookies spoofing, considering that security should use session.

3 session will be stored on the server for a certain period of time. When the visit increases, it will take up the performance of your server. You should use cookies to mitigate server performance. 4 A single cookie can not save more than 4K of data, many browsers limit a site to save up to 20 cookies. 5) Therefore, it is suggested that the important information such as login information be stored as the session other information if necessary, can be placed in the cookie 4 Document.cookie Properties

Expires property

Specifies the lifetime of the Coolie, by default coolie are temporary, they store values that exist only during a browser session, and when the user launches the browser these values are lost, and if you want the cookie to exist for a period of time, set the Expires property to an expiration date for the future. is now replaced by the Max-age property, max-age the lifetime of the cookie in seconds.

Path property

It specifies the Web page that is associated with the cookie. By default, the cookie is associated with the page that created it, the page in the same directory, and the page under the subdirectory in the directory where the page is located.

Domain Property

The Domain property enables multiple Web servers to share cookies. The default value for the domain property is the host name of the server on which the cookie is created. You cannot set a cookie's domain to a domain other than the server's domain. For example, let the server located in order.damonare.cn be able to read the cookie value set by catalog.damonare.cn. If catalog.damonare.cn's page creates a cookie that sets its Path property to "/", the domain property is set to ". Damonare.cn", This cookie is accessible to all Web pages located on catalog.damonare.cn and all Web pages located in orlders.damonare.cn, as well as Web pages located on other servers in the damonare.cn domain.

Secure property

It is a Boolean value that specifies how cookies are transmitted over the network, which is unsafe by default and transmits 5 via a normal HTTP connection . Localstorage

This is a persistent storage method, which means that the data will never expire if it is not cleaned manually.
It is also the use of key-value storage data, the underlying data interface is SQLite, according to the domain name of the data stored in the corresponding database files. It can save larger data (10mb,chrome is 5MB on the IE8), and the saved data will not be sent to the server to avoid wasted bandwidth. property methods for Localstorage

The following table is a localstorge of some of the properties and methods

Property Methods	Description
Localstorage.length	Get the number of storage
Localstorage.key (N)	Gets the key value of the nth element pair in the storage (the first element is 0)
Localstorage.getitem (Key)	Gets the value for the key-value key
Localstorage.key	Gets the value for the key-value key
Localstorage.setitem (key, value)	Add data, key value is value
Localstorage.removeitem (Key)	Remove data with key value as key
Localstorage.clear ()	Clear All data

The disadvantage of Localstorage①localstorage Size limited to 5 million characters or so, each browser inconsistent ②localstorage in the privacy mode can not read ③localstorage nature is read and write files, more data will be compared card (Firefox will be a one-time import of data into memory, If you think about it, it's scary. ④localstorage can't be crawled by a crawler, don't use it to completely replace URL arguments 6. Sessionstorage

Similar to the session used on the server side, it is a conversation-level cache, and closing the browser will erase the data. But something special is that its scope is window level, which means that the sessionstorage data between different Windows cannot be shared. Use methods (exactly the same as Localstorage):

Property Methods	Description
Sessionstorage.length	Get the number of storage
Sessionstorage.key (N)