Two Data Storage Methods: Cookie, Web Storage, and cookiestorage

Two Data Storage Methods: Cookie, Web Storage, and cookiestorage
Two Data Storage Methods: Cookie and Web Storage1. Cookie

Cookie serves as a shopping card for you for the first time when you go to a supermarket. This shopping card stores some of your personal information. The next time you come to this supermarket chain, the supermarket will recognize your shopping card and it will be good to shop directly next time. In layman's terms, when a user accesses a server through the HTTP protocol, the server will return some Key/Value pairs to the client browser, add some restrictions to the Data. when the conditions are met, the data will be completely taken back to the server when the user accesses the server next time.

Cookie is originally used to store session information on the client. It requires the server to send the Set-CookieHTTP header to any HTTP request as part of the response. Cookie
Take name as the name and value as the value. The name and value must be URL encoded during transmission. The browser stores the session information.
The HTTP header sends the information back to the server. Cookie is bound to a specific domain name in nature. When a cookie is set and a request is sent to the domain name that creates it, the cookie is contained, this ensures that information stored in cookies is intelligently accessible to approved recipients, but not to other domains. You can use Document. cookie AttributeTo set the cookie Cookie Composition

Cookie advantages

• Configurable expiration rules: the Cookie can expire at the end of the browser session, or can exist on the client computer indefinitely, depending on the client's expiration rules.
• No server resources are required: cookies are stored on the client and are read by the server after being sent.
• Simplicity: Cookie is a lightweight text-based structure that contains simple key-value pairs.
• Data Persistence: although the duration of the Cookie on the client computer depends on the Cookie expiration processing and user intervention on the client, the Cookie is usually the longest data retention form on the client.

Drawbacks of cookies

Although cookies provide convenience for persistent storage of client data and share the burden on server storage, they still have many limitations.

• CookieLimits on quantity and length:The total number of cookies in each domain is limited. IE6 or earlier versions can have up to 20 cookies. IE7 and later versions can have up to 50; Firefox can have up to 50 cookies; chrome and Safari do not have hard limitations. The cookie length is also limited. It is best to keep the cookie within 4095B. Otherwise it will be intercepted.
• Security Questions:The Cookie transmits all the data to be saved from the client to the server through the HTTP header, and then from the server to the client. All the data is stored in the browser of the client, therefore, the Cookie data can be accessed. If the cookie is intercepted, the person can obtain all the information. Even if encryption is not completed, because the interceptor does not need to know the meaning of the cookie, he can simply forward the cookie as it is.
• Performance problems:Because all cookies are sent by the browser as request headers, storing a large amount of information in cookies will affect the request performance of specific domains.

2. Web Storage

The purpose of Web Storage is to overcome some restrictions brought by cookies. When data needs to be strictly controlled on the client, it does not need to continuously send data back to the server. Its main purpose is:

Storage Type

The Storage type provides the largest Storage space (different from the browser) to store name-value pairs. It can only store strings. Non-string data is converted to strings before being stored.

SessionStorage object

Stores data specific to a session. The data is only stored in the browser.
Data stored in sessionStorage can be refreshed across pages;
SessionStorage objects are mainly used to store session-specific small data segments.

GlobalStorage object

Purpose:Stores data across sessions. To use a globalStorage object, you must first specify the domains that can access the data, and use square brackets to mark them:

// Save the data globalStorage ["wrox.com"]. name = "Vicky"; // obtain the data var name = globalStorage ["wrox.com"]. name; it is best to specify a domain name when using the globalStorage object. If the domain name cannot be determined in advance, use location. host is safer as the attribute name. If removeItem () or delete is not used, or the browser cache is not cleared, the data stored in the globalStorage attribute will be stored on the disk all the time, therefore, globalStorage is suitable for storing documents on the client or storing user preference settings for a long time. LocalStorage object

The localStorage object isHtml5Replace globalStorage's persistent storage client data solution. To access the same localStorage object, the page must come from the same domain name and use the same protocol on the same port. This is equivalent to globalStorage [location. host].
The data stored in localStorage is the same as that in globalStorage.JavaScriptDelete or clear the browser cache.

To sum up, js provides sessionStorage and globalStorage in higher browsers. LocalStorage is provided in HTML5 to replace globalStorage.
Web Storage in html5 includes two Storage methods: SessionStorageAnd LocalStorage.
SessionStorage is used to locally store data in a session. The data can be accessed only on pages in the same session. When the session ends, the data is also destroyed. SessionStorage is not a persistent local storage, but a session-level storage.
LocalStorage is used for persistent local storage. Unless data is actively deleted, the data will never expire. Differences between Web storage and cookie

1. The concept of Web Storage is similar to that of cookie. The difference is that it is designed for larger Storage capacity. The Cookie size is limited, and the Cookie will be sent every time you request a new page. This will result in a waste of bandwidth. In addition, the cookie also needs to specify the scope, cross-origin calls are not allowed.
2. In addition, Web Storage has methods such as setItem, getItem, removeItem, and clear, which are not required by cookies.Frontend DevelopmentByEncapsulate setCookie and getCookie by yourself.
3. However, cookies are indispensable: cookies interact with servers and exist as part of HTTP specifications, web Storage is only created to "Store" data locally.