当前位置：网站首页>Browser local storage

Browser local storage

2022-07-01 07:19:00 【18 hate programming】

List of articles

Scene Introduction
Browser local storage
window.localStorage
window.sessionStorage
summary

Scene Introduction

First, we can understand what is the local storage of browsers through a scenario

For example, we open Taobao Search psp( Without logging in to your account ), Then close the website , We reopen Taobao , It can be found in the search history psp.
Insert picture description here

Why is it like this ？ Here is the local storage of the website with the help of the browser , The data is stored on the hard disk of the computer .
We can use the developer tools of the browser to view ：
Insert picture description here

Similarly, we can store things in the browser ！

Browser local storage

Web Storage API Provides sessionStorage （ Session storage ） and localStorage（ The local store ） Two storage objects are used to add the data of the web page 、 Delete 、 modify 、 Query operation .

localStorage For long-term preservation of data across the site , Saved data has no expiration time , Until removed by hand .( If you close the browser, it won't disappear )
sessionStorage Used to temporarily save the same window ( Or tabs ) The data of , The data will be deleted after closing the window or tab .

localStorage There are only two ways to delete data ：
① Programmers use related cleanup methods
② The user manually deletes the cached data of the browser

Corresponding API And attributes ：
Insert picture description here

window.localStorage

grammar ：

window.localStorage

Save data syntax ：

localStorage.setItem("key", "value");

Key value pairs will eventually be stored as strings

Read data syntax ：

var lastname = localStorage.getItem("key");

Delete data syntax ：

localStorage.removeItem("key");

Clear data syntax ：

localStorage.clear();

We now create a web page and save some data on it for a long time ：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="storeData()"> Click on me to store data on the web page </button>
</body>
<script> function storeData() {
       localStorage.setItem(' Zhang San ','18') } </script>
</html>

Insert picture description here
If we want to store an object ：

<body>
    <button onclick="storeData()"> Click on me to store data on the web page </button>
</body>
<script> let person = {
      name:'Tom',age:'20'} function storeData() {
       localStorage.setItem(' Zhang San ',6666) localStorage.setItem('msg',JSON.stringify(person)) } </script>

Insert picture description here
Here are some api Use it all ：

<body>
    <button onclick="storeData()"> Click on me to store data on the web page </button>
    <button onclick="watchData()"> Click on my data on the web page </button>
    <button onclick="deleteData()"> Click on me to delete data on the web page </button>
    <button onclick="clearData()"> Click on me to clear the data on the web page </button>
</body>
<script> let person = {
      name:'Tom',age:'20'} function storeData() {
       localStorage.setItem(' Zhang San ',6666) localStorage.setItem('msg',JSON.stringify(person)) } function watchData() {
       console.log(localStorage.getItem(' Zhang San ')) console.log(JSON.parse(localStorage.getItem('msg'))) } function deleteData() {
       localStorage.removeItem(' Zhang San ') } function clearData() {
       localStorage.clear() } </script>

Objects will be displayed as strings if viewed directly , Obviously this is not what we want , We can use JSON.parse Analyze , We can get the object we want again .

If you view non-existent data , Will be displayed null.
JSON.parse(null) The result is still null

window.sessionStorage

And window.localStorage The method of use is exactly the same
Difference is that ：sessionStorage Used to temporarily save the same window ( Or tabs ) The data of , The data will be deleted after closing the window or tab .

summary

webStorage

The storage content size generally supports 5MB about （ Different browsers may be different ）
Browser side through Window.sessionStorage and Window.localStorage Property to implement the local storage mechanism .
relevant API：
1. xxxxxStorage.setItem('key', 'value');
  This method takes a key and a value as arguments , Key value pairs are added to the store , If key name exists , Then update its corresponding value .
2. xxxxxStorage.getItem('person');
  This method takes a key name as an argument , Return the value corresponding to the key name .
3. xxxxxStorage.removeItem('key');
  This method takes a key name as an argument , And remove the key name from the storage .
4. xxxxxStorage.clear()
  This method will empty all data in the storage .
remarks ：
1. SessionStorage The stored content will disappear as the browser window closes .
2. LocalStorage Stored content , It needs to be cleared manually to disappear .
3. xxxxxStorage.getItem(xxx) If xxx Corresponding value Can't get , that getItem The return value of null.
4. JSON.parse(null) The result is still null.