A brief introduction to common browser local storage

Browser localStorage can be divided into the following three methods cookie, sessionStorage, localStorage

Cookie, sessionStorage, localStorage can be used as browser storage, what is the difference between the three?

What is a cookie

1. Why use cookies?

Web applications use the HTTP protocol to transfer data. HTTP is a stateless protocol. Once the data exchange is complete, the connection between the client and server is closed and a new connection needs to be established to exchange data again. This means that the server cannot track the session from the connection.

You’ve probably experienced a website that asks you to remember your account and password when you log in, so you don’t have to enter it again the next time you visit. This is the function of cookie. When we visit again, it is convenient for the server to directly fetch the last thing according to our cookie (for each cookie, the server will store the data we took last time for this cookie, and the next time for the same cookie, it will fetch it directly from here).

The role of the cookie

Cookies are generated by the server and sent to the User-Agent (generally the browser). (The server tells the browser to set cookies), and the browser automatically saves cookies in a text file in a directory with key/value. The next time the same website is requested, the Cookie is automatically sent to the server, that is, added to the request header (if the browser is set to Cookie enabled). A Cookie is a small file (the browser has a limit on the size of the Cookie ——- used to record some information)

The characteristics of the cookie

1. Cookie has a shelf life: Each browser has its own cookie. Every time a request is made, the cookie will be sent according to the domain. The preservation date can be set by setting expires and max-age.

2. Meet the same origin policy: although images.google.com and www.google.com belong to Google, they have different domain names and cannot operate on each other’s cookies. Note that different browsers have different rules for accessing cookies. For Chrome, the path must be the current directory. If the path is set to any other directory, only the current page can access cookies from the current directory and other directories

3. Cookie memory size is limited: the size is typically 4K

4. Cookie security: Cookies can be changed locally file sensitive data should not be placed in cookies

5. Use of Cookies: Cookies are actually mainly set by web server developers. Front-end developers rarely use Cookies, but they also use them, for example, to set the account information of the login page.

Let’s go to the browser console, and for Chrome, switch to Application, and you’ll see cookies under Storage on the left. Click on it to see what cookies are currently available.

What is the localStorage

The read-only localStorage property allows you to access a Document source (Origin) object Storage; The stored data is saved in the browser session. LocalStorage is similar to sessionStorage (described below), but differs in that: Data stored in localStorage can be retained for a long time; When the page session ends — that is, when the page is closed, the data stored in sessionStorage is erased.

Note that whether the data is stored in localStorage or sessionStorage, they are specific to the protocol of the page.

Also, key-value pairs in localStorage are always stored as strings. Note that key-value pairs are always stored as strings compared to JS objects, which means that numeric types are automatically converted to string types.

1. grammar

myStorage = localStorage;

// The following code snippet accesses the local object under the current domain name and adds a data item through [' storage.setitem () '].
localStorage.setItem('myCat'.'Tom');

// This syntax is used to read the 'localStorage' item as follows:
let cat = localStorage.getItem('myCat');

// This syntax is used to remove the 'localStorage' item as follows:
localStorage.removeItem('myCat');


// This syntax is used to remove all 'localStorage' items as follows:
localStorage.clear();
Copy the code

What is the sessionStorage

The sessionStorage property allows you to access a sessionStorage object corresponding to the current source. It is similar to localStorage except that data stored in localStorage does not have an expiration date, while data stored in sessionStorage is cleared when the page session ends.

• The page session remains as long as the browser is open, and the original page session remains when the page is reloaded or restored.
• The top-level browsing session context is copied as the context for the new session when a new TAB or window opens a page, unlike session cookies.
• Opening multiple Tabs pages with the same URL creates their ownsessionStorage.
• Close the corresponding browser Window (Window/TAB) to clear the correspondingsessionStorage.

1. grammar

// Save data to sessionStorage
sessionStorage.setItem('key'.'value');
// Get data from sessionStorage
let data = sessionStorage.getItem('key');

// Delete saved data from sessionStorage
sessionStorage.removeItem('key');

// Delete all saved data from sessionStorage
sessionStorage.clear();
Copy the code

The difference between the three ways

Cookie exists on the client and session exists on the server. Because cookies are stored on the client, data may be stolen, so cookies are generally not used to store sensitive information. Cookies can be set when the server responds, or when the client sends an HTTP request, the request header can be set, and the cookie can be sent to the server. Cookies have a size limit on the client side, typically 4K. Compare and contrast

Pay attention to

Local storage is generally plaintext storage. Do not store important information directly in the local storage. If you must store it, you must encrypt the stored information.

Encryption method:

A. Reversible encryption (generally set their own rules)

B. Irreversible encryption :(generally, encryption is based on MD5, and the data encrypted by MD5 may be encrypted twice)