Cookies in front-end development: detailed cookie Attributes

Some time ago to do the project, in front of the implementation of frequent operation cookies, record a few for your reference!

Cookie operation in the front-end development process often encountered, of course, if only to store some simple user data, or relatively simple, we have to do may just set the cookie name, value, expiration time, etc., read also as long as the name of the cookie to read the corresponding cookie value can be. In complex applications, the light is certainly not enough.

Properties of Cookies

In addition to name and value (value), cookies also have the following optional attributes that control the validity of the cookie, scope, security, and so on:

Expires property
Specifies the lifetime of the cookie, which is temporary by default, and stores values that exist only during the browser session, and are lost when the user exits the browser, and if you want the cookie to exist for a period of time, The Expires property is set to a future expiration date or point of time in milliseconds, expires the current time of the expires that is set. is now replaced by the Max-age property, max-age the lifetime of the cookie in seconds.

If the Max-age property is a positive number, it means that the cookie will automatically expire after max-age seconds. The browser persists the cookie max-age as a positive, which is written to the corresponding cookie file. Whether the customer closes the browser or the computer, the cookie is still valid as long as it is max-age seconds before logging on to the site.

If Max-age is a negative number, it means that the cookie is valid only in this browser window and in the child window that is open in this window, and the cookie is invalidated when the window is closed. A max-age is a negative cookie that is a temporary cookie and is not persisted and will not be written to a cookie file. The cookie information is stored in browser memory, so the cookie disappears when you close the browser. The default Max-age value for cookies is-1.

If Max-age is 0, the cookie is deleted. The cookie mechanism does not provide a way to delete cookies, so the effect of deleting cookies is achieved by setting the cookie's immediate expiration. Expired cookies are deleted by the browser from the cookie file or in memory.

If you do not set the expires or Max-age this cookie is session by default, the cookie disappears when you close the browser.

Here to explain: the session of the cookie under IE6, if the user really page jump open page or new open window (including target= "_blank", the right mouse button new open window), are in the same session. It is not the same session if the user opens a new browser program or if the current page is opened by a process. Other browsers as long as your session exists, or the same Session,cookie can also be shared. In the previous period of the project IE6 eat a lot of a loss.

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 a.sodao.com be able to read the cookie value set by b.sodao.com. If the b.sodao.com page creates a cookie that sets its Path property to "/" and sets the domain property to ". Sodao.com," then all the pages located in b.sodao.com and all of the a.sodao.com Web pages, and Web pages located on other servers in the sodao.com domain, can access this cookie.

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.

Secure property
It is a Boolean value that specifies how cookies are transmitted over the network, which is unsafe by default and is transmitted through a common HTTP connection;

HttpOnly Property
The HttpOnly property limits the extent to which a cookie is scoped to an HTTP request. Specifically, this property instructs the user agent to ignore access to cookies via "non-HTTP" (such as the interface that the browser exposes to JS). Note that the HttpOnly property and the secure property are independent of each other: a cookie can be either httponly or secure.
In the previous period of the project I use JS to read a cookie, the results of how all can not get this value, and finally verify that this cookie is httponly, spent nearly 2 hours, tragedy.

The transmission of cookies

The browser stores the cookie information as name-value对 a local, and whenever a new document is requested, the browser sends a cookie to enable the server to track customers through HTTP requests. So from the Web performance point of view we should try to reduce the cookie to achieve maximum transmission performance.

Encoding and decoding of cookies

Since the value in the name/value of the cookie does not allow the semicolon, comma, and spaces to be included, any data stored as a cookie value should be encoded in order to maximize user agent and server compatibility. For example, the JS global function known as our front-end encodeURIComponent encoding and decodeuricomponent decoding.

Cookies as client-side storage

It said earlier that whenever a new document is requested, the browser sends cookies to the server, causing Web performance to degrade. Therefore, it is not recommended to store cookies as a client, as an alternative, see: JavaScript Local storage practices (HTML5 localstorage and IE UserData).

Cookies with the same name

Cookies with the same name, different domain or different path, are different cookies, cookies of the same name, same domain and same path, different expires, belong to the same cookie.

Article source: Search Road ued