• Welcome to the eight year blog, I'm glad to meet you at the right age!
  • Due to the theme, QQ login partners will display the default avatar in the comments. Please go to the personal center and upload the avatar again.

Local storage is no longer used for local storage

Code Notes barben One year ago (June 11, 2019) 672 views 0 comments

For example

I have a webpage. After I open it, I will pop up a notice or advertisement. Anyway, I want to pop a window.
If you don't click "don't remind me next time", it will still pop up for you next time!!!

Who, for example, and why did you hit him?


Implementation method: After the user clicks "no more pop-up", a value will be written, for example: bunchhuang = true. After the page is loaded, it will judge whether the value is true. If it is true, it will not pop up

In addition to cookies, you can use simpler Local storage To achieve this function.

What is localstorage

In HTML5, a new local storage feature is added. This feature is mainly used as local storage to solve the problem of insufficient cookie storage space (the storage space of each cookie in the cookie is 4K). The general browsers in local storage support 5m size, which is different in different browsers.

Advantages of local storage

1. Local storage extends the 4K limit of cookies
2. Local storage can directly store the first request data locally. This is equivalent to a 5m size database for front-end pages. Compared with cookie, it can save bandwidth, but this is only supported in higher version browsers

Limitations of local storage

1. The size of browsers is not uniform, and the local storage property is only supported in IE version above IE8
2. At present, all browsers will limit the value type of localstorage to string type, which requires some conversion for the common JSON object type
3. Localstorage is not readable in browser privacy mode
4. The essence of local storage is to read the string. If the storage content is too much, it will consume memory space and cause page change
5. Localstorage cannot be crawled by crawler
6. Local storage is permanent storage

Write and modify operations for 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 the corresponding values: bourbon, 18, and male.

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

Modifying the value of a field can be directly overridden 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, no matter what the type of storage string is, you can only store the result.

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

Removal 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.


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Use local storage localstorage to realize no pop-up function - https://www.barben.cn/code/513.html
Like it( nine )
Post my comments
Cancel comment
expression Mapping Bold Strikethrough Center Italics

You need to bring your nickname and email with you in the year of eight!

  • Nickname (required)
  • Email address (required)
  • website