Full analysis of JavaScript - the concept and usage of local storage in detail

Local storage concept:

It is what the browser provides to us so that we can save some data on the browser

common local storage

localStorage

sessionStorage

localStorage

Features:

1. Long-term storage, unless it is manually deleted, it will always be saved in the browser, and it will be gone if you clear the cache or uninstall the browser

2. Cross-page communication is possible, that is to say, writing on one page can be read on another page

keep

4. Grammar:window.localStorage.setItem(名字,值)

Note: Only data of string type can be saved, other data types cannot be saved

Obtain

grammar:window.localStorage.getItem(名字)

Note: What is saved is a string type, and what is taken out is also a string type

return value:

+ If there is this piece of data in localStorage, the value obtained is the value of this piece of data
+ If there is no such piece of data in localStorage, the value obtained is null

delete

grammar:window.localStorage.removeItem(名字)

Function: It is to delete the data in localStorage

// 保存 
var num = 200 
window.localStorage.setItem('a', num) 
// 获取 
var res = window.localStorage.getItem('b') 
console.log(res); 
console.log(typeof res); 
// 删除 
window.localStorage.removeItem('a')

sessionStorage

Features:

1. Session storage, that is, when the browser is closed, there will be no
2. Can communicate across pages (required)
3. Requirements: This page must be redirected

keep

grammar:window.sessionStorage.setItem(名字,值)

Note: Only data of string type can be saved, other data types cannot be saved

Obtain

grammar:window.sessionStorage.getItem(名字)

Note: What is saved is a string type, and what is taken out is also a string type

return value:

+ If there is this piece of data in sessionStorage, the value obtained is the value of this piece of data
+ If there is no such piece of data in sessionStorage, it will be null

delete

grammar:window.sessionStorage.removeItem(名字)

Function: It is to delete this piece of data in sessionStorage

// 保存 
window.sessionStorage.setItem('a', 300) 
// 获取 
var res = window.sessionStorage.getItem('a') 
console.log(res); 
console.log(typeof res); 
// 删除 
window.sessionStorage.removeItem('a')

Browser local storage - cookies

Features:

1. Only strings can be stored, with a fixed format

=> key=value; key2=value2; key3=value3

2. Cookie storage size is limited

=> around 4KB

3. timeliness of storage

=> The default is session-level aging, you can manually set the expiration time

4. Operation must rely on server

=> Locally opened pages cannot operate cookies

=> That is to say, it cannot be saved or read.

=> requires that the page must be opened on the server

5. Follow the front-end and back-end requests to automatically carry

=> As long as there is content in the cookie space

=> will be automatically carried during the interaction between the page and the backend

6. Front-end and back-end operations

=> The front end can use JS to operate

=> Any backend language can operate

7. Storage depends on the domain name

=> Which domain name is stored, which domain name is used

=> Cannot communicate across domain names

Operation of cookies

set a cookie

grammar:document.cookie = 'key=value'

// 设置一条 cookie 
// 设置了一条叫做 a 的 cookie 存储的值是 100 
document.cookie = 'a=100' 
// 设置了一条叫做 b 的 cookie 存储的值是 200 
document.cookie = 'b=200' 
// 设置一条带有过期时间的 cookie 
var time = new Date() 
document.cookie = 'a=100;expires=' + time 
// 设置一条 30s 以后过期的 cookie 
var time = new Date() 
time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + 1000 * 30) 
// console.log(time) 
document.cookie = 'a=100;expires=' + time

get cookie

grammar:document.cookie

Return value: the complete cookie string

console.log(document.cookie)