The difference between cookie, localStorage, and sessionStorage

The difference between cookie, localStorage, and sessionStorage

1.localStorage

Features:

1. Storage control is 5M

2. The number of stored items is affected by the storage space

3. Can add, delete, modify and check

4. The stored data only supports strings ( emphasis!!!!!! )

   • JSON.parse(json format string)
   • JSON.stringify()

5. follow the same-origin policy

6. As long as it is in the same source URL, the data in localStorage can be shared

7. Will be consistent in the browser, unless actively destroyed removeItem() / clear()

Commonly used methods:

window.localStorage.setItem(key,value);//设置存储的内容
window.localStorage.getItem(key);//获取内容
window.localStorage.removeItem(key);//删除内容
window.localStorage.clear();//清空内容

Same Origin Policy

Whether the two URLs are of the same origin depends on whether the http protocol, domain name/ip address, and port number are all consistent

The composition of url

http protocol, domain name/IP address, port number, path, query parameters/dynamic parameters

2.sessionStorage

Features:

1. The life cycle is to close the current browser window

2. can be accessed under the same window

3. The data size is about 5M

4. Temporary storage: When the browser is closed or the tab is closed, the local storage content will be destroyed

5. Stored data type: just like localStorage, it can only be a string

6. sessionStorage: does not comply with the same-origin policy

7. Data sharing is not supported, and same-origin pages do not support data sharing

Commonly used methods:

window.sessionStorage.setItem(key,value);//设置存储的内容
window.sessionStorage.getItem(key);//获取内容
window.sessionStorage.removeItem(key);//删除内容

3.cookie

features

1. Stored on the client, does not occupy server resources
2. The storage capacity is limited, generally 4KB
3. Can only be in string format

Composition of cookies

• key: key

• value: value

• domain: Domain, expressing which website this cookie belongs to

• path: path, expressing which base path this cookie belongs to the website, just like different departments of the same company will issue different pass. For example /news, it means that this cookie belongs to /newsthis path.

• secure: whether to use secure transport

• expire: expiration time, indicating when the cookie expires

4. The difference between cookie, localStorage and sessionStorage

characteristic	cookie	localStorage	sessionStorage
life cycle	You can set the expiration time. If there is no setting, the default is to expire after closing the browser.	Stored permanently unless cleared	Valid only in the current session, it will be cleared after closing the page or browser
Store data size	around 4k	Usually 5MB	Usually 5MB
HTTP request	It will be carried in the HTTP header every time. If you use cookies to save too much data, it will cause performance problems	It is only saved in the client (ie browser), and does not participate in communication with the server	It is only saved in the client (ie browser), and does not participate in communication with the server
ease of use	It needs to be encapsulated by itself, and the native cookie interface is not friendly	The native interface can be accepted or re-encapsulated	The native interface can be accepted or re-encapsulated