JS: localStorage and sessionStorage of local storage (storage and acquisition)

Enter my home page to view more JS sharing!

How short my code is, how short this article is!

Compare cookie s:

Cookies communicate with the server; storage only exists on the customer service side and does not participate in server communication;
Also affected by the same origin policy, the corresponding data can be viewed only when the domain names are consistent;
Navigator Cookies enabled detects whether cookies are enabled, that is, cookies can be considered to control whether they are enabled, while storage is automatically enabled and will not be manually closed. (e.g. in privacy mode)

1, localStorage - data storage without time limit

Knowledge points:

Store the data of the key/value pair;
The saved data has no expiration time until it is manually deleted (including emptying the browser cache);
The 4K limit of cookie s is extended, and the size of each browser is not uniform;
Only string type storage is supported (at present, all browsers will limit the value type of localStorage to string type), such as numbers, which will be changed into strings after storage;
It is not readable under the privacy mode of the browser;
In essence, it is the reading of strings. If there are many stored contents, it will consume memory space and cause the page to become stuck;
Can't be captured by reptiles
Syntax: setItem(key,value), getItem(key), removeItem(key)

Use Demo:

//Define Key
const userk = "uk2020";
const tokenk = "tk2020";
const objK = "ok2020";
//storage
localStorage.setItem(userk, "Control the code with Qi");
localStorage.setItem(tokenk, "14332239527007001");
localStorage.setItem(objK, {
  ids: 996,
  title: "The world is still here. I'm working overtime"
});
//read
let userName = localStorage.getItem(userk);
let token = localStorage.getItem(tokenk);
let obj = localStorage.getItem(objK);

console.log(userName, token, obj);
//Output: using Qi Yu code 143322395270007001 [object object]

In the developer tool of the browser, the Application can view:

The storage structure is understood at a glance. The value is automatically converted to a string. Therefore, the storage of array and object data generally needs to be converted:

//Converting JSON formatted strings
localStorage.setItem(objK, JSON.stringify({ ids: 996, title: "The world is still here. I'm working overtime" }));
//obtain 
let obj = localStorage.getItem(objK);
console.log(JSON.parse(obj));
//output
{
    ids: 996
    title: "The world is still here. I'm working overtime"
}

It can also be used with URIComponent:

//conversion
localStorage.setItem(objK, encodeURIComponent(JSON.stringify({ ids: 996, title: "The world is still here. I'm working overtime" })));
//obtain
let obj = localStorage.getItem(objK);
console.log(JSON.parse(decodeURIComponent(obj)));

Reference documentation (Rookie tutorial)

2, sessionStorage

Knowledge points:

The data storage for a session, that is, temporary storage, will be cleared when the window is closed (not when the browser is closed);
It is not readable under the privacy mode of the browser;
Syntax: setItem(key,value), getItem(key), removeItem(key)

The usage is the same as that of localStorage:

//Key
const userk = "uk2020";
const tokenk = "tk2020";
const objK = "ok2020";
//storage
sessionStorage.setItem(userk, "Control the code with Qi");
sessionStorage.setItem(tokenk, "14332239527007001");
sessionStorage.setItem(objK, encodeURIComponent(JSON.stringify({
  ids: 996,
  title: "The world is still here. I'm working overtime"
})));
//obtain
let userName = sessionStorage.getItem(userk);
let token = sessionStorage.getItem(tokenk);
let obj = sessionStorage.getItem(objK);
console.log(userName, token, JSON.parse(decodeURIComponent(obj)));