Let's make an analogy

I have a web page. When I open it, I will pop up an announcement or advertisement. Anyway, I will pop up a window.
If you don't click something like "Don't remind me again", it will pop up next time!!!
For example, who and why did you hit him?

Implementation method: After the user clicks "Don't pop up again", a value will be written, such as "buttonchuang=true". Every time the page is loaded, it will be judged whether the value of "buttonchuang" is true. If it is true, it will not pop up

In addition to cookies, you can also use simpler LocalStorage To realize this function.

What is localStorage

In HTML5, a new localStorage feature is added. This feature is mainly used as local storage, which solves the problem of insufficient cookie storage space (the storage space of each cookie in the cookie is 4k). The general browser in localStorage supports a size of 5M, which will be different in different browsers.

Advantages of localStorage

1. LocalStorage extends the 4K limit of cookies
2. LocalStorage can directly store the data requested for the first time locally, which is equivalent to a 5M database for front-end pages. Compared with cookies, it can save bandwidth, but it is only supported in high version browsers

Limitations of localStorage

1. The size of the browser is not uniform, and only IE versions above IE8 support the property of localStorage
2. At present, all browsers limit the value type of localStorage to string type, which requires some conversion for our common JSON object types
3. LocalStorage is not readable in the privacy mode of the browser
4. LocalStorage essentially reads strings. If there are many contents stored, it will consume memory space and cause the page to become stuck
5. LocalStorage cannot be crawled
6. LocalStorage belongs to permanent storage

Write and modify operations of localStorage

 window.localStorage["name"] = "Bourbon"; window.localStorage.age = 18; window.localStorage.setItem("sex", "male");

The above code writes the name, age, and sex fields in three different ways, and also gives corresponding values: Bourbon, 18, and male.

 window.localStorage["name"] = "Bobi";

Modifying the value of a field can be directly overwritten with the new value.

Reading of localStorage

 console.log(window.localStorage["name"]); console.log(window.localStorage.age); console.log(window.localStorage.getItem("sex"));

You can also read their values in three different ways.

By the way, localStorage only supports string storage. No matter what type of data you save, the output result is string.

 window.localStorage.num = 666; console.log(typeof window.localStorage.num); //  string window.localStorage.bool = true; console.log(typeof window.localStorage.bool); //  string

Deletion of localStorage

 window.localStorage.clear();

You can use the clear() method to clear all fields.

 window.localStorage.removeItem("age");

You can also use the removeItem() method to delete the specified field.