localStorage/sessionStorage/cookie storage

Local storage: store some data generated in the program to the computer

Common local storage schemes:
1.storage scheme:

Method 1: localStorage ===== Local persistent storage (it always exists as long as it is not manually deleted)
How to know whether the data has been saved: Find -Application-storage-localStorage in the inspection tool

Features: 1. Once stored, it will exist permanently unless you manually delete it.
2. It can communicate across pages, that is, the data stored in page a can be obtained from other pages.
3. Only some basic types of data can be stored when storing. , data of complex types cannot be stored

语法：
    存数据(增)：window.localStorage.setItem(key,value)
    删除数据： window.localStorage.removeItem(键名)
    一键清空：window.localStorage.clear()
    查询数据：window.localStorage.getItem(键名)
    改 数 据：语法和存储数据的语法是一样的 // 对象中不能出现重复的键名，故键名第二次出现视为更改

Method 2: sessionStorage ===== session storage (temporary storage, as long as the browser is closed, it will be gone) the syntax
of adding, deleting, modifying, checking, and clearing with one key is the same as above , and it supports cross-page communication, and it can also be used in other pages Obtain data (prerequisite: other pages must be redirected through this page, and must be the current window, if it is a new window, it will not work)

语法：
    存数据(增)：window.sessionStorage.setItem(key,value)
    删除数据： window.sessionStorage.removeItem(键名)
    一键清空：window.sessionStorage.clear()
    查询数据：window.sessionStorage.getItem(键名)
    改 数 据：语法和存储数据的语法是一样的 // 对象中不能出现重复的键名，故键名第二次出现视为更改

2. Cookie scheme:

Features of cookie storage data:
1. cookie can only store character strings
2. cookie storage data has a size limit, only about 4kb of data can be stored, not too much
3. cookie storage defaults to session level , that is, window It will be gone if it is closed, but we can set the expiration time
4. The operation of the cookie must rely on the 'server', and the page opened locally cannot operate the cookie
5. The data of the cookie will be automatically carried when the front-end and back-end communicate
6 .storage depends on the domain name. It can only be used in that domain name if it is opened under which domain name, and the key point of operating cookies that cannot communicate across domain names
: To study how the page can be opened on the server. (Just use the live server plug-in of vscode)
When running: right click and select: open with live server option to run

The syntax for storing data with cookies:

document.cookie = 'key=value'
//设置过期时间：
            我们设置的时间最终都会按照世界标准时间执行的
            toGMTString()===转成北京时间
document.cookie = 'password=123456;expires=' + 时间对象.toGMTString()//转世界时间
//获取 cookie
console.log(document.cookie）

//存储了一条数据
document.cookie = 'username=zhangsan'
//存储一条带有过期时间的cookie
//创造一个事件对象 time就是时间对象，里面的时间是本地系统时间
var time = new Date()
//现在时间是2022年10月20日 16：57分 设置在16：59分过期
time.setMinute(59)
document.cookie = 'password=123456;expires=' + time.toGMTString()

localStorage/sessionStorage/cookie storage

Guess you like