• Welcome to the eight blog of that year. I am very glad to meet you at the right age.
  • The little buddy who has logged on QQ due to the theme shows the default head in the comments. Please go to the personal center to upload the avatar again.

Using local storage localStorage to achieve no longer pop-up function

Code Notes Barben 4 months ago (06-11) 170 browse 0 comments

Analogy

I have a web page. When I open it, I play a bulletin or an advertisement. Anyway, I want to play a window.
If you do not click "next time no longer remind" or something like that, it will still play for you next time!!!

Who is it? Why do you want to beat him?


Implementation method: User click "no longer pops up" and write a value, for example, butanchuang = true. Every time the page is loaded, it is determined whether butanchuang is true or not for true.

Besides Cookie, you can use simpler ones. LocalStorage (local storage) To achieve this function.

What is localStorage?

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

Advantages of localStorage

1, localStorage expanded the 4K limit of cookie.
2, localStorage will be able to store the first request data directly to the locality, which is equivalent to a 5M size. For the front page database, compared to cookie, it can save bandwidth, but this is supported only in the high version browsers.

Limitations of localStorage

1, browser size is not uniform, and the IE version above IE8 only supports localStorage attribute.
2, at present, all browsers will restrict the value type of localStorage to string type, which requires some transformations in the JSON object types that are more common in our daily life.
3. LocalStorage is not readable under the browser's privacy mode.
4, localStorage is essentially reading strings. If you store more content, it will consume memory space, which will lead to page change.
5, localStorage cannot be crawled by crawlers.
6, localStorage belongs to permanent storage.

Writing and modifying operation of localStorage

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

The above code is written into name, age and Sex fields in three different ways, and the corresponding values are also given: Bourbon, 18, male.

 Window.localStorage["name" = = "Bobi";

Modifying the value of a field can be directly covered by new values.

Read 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 type storage, no matter what type of data you are storing, the result of output 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 empty all fields.

 Window.localStorage.removeItem ("age");

You can also delete the specified fields using the removeItem () method.


Eight this year's blog, we've been there.
If the author does not indicate the original article, please indicate the link and source.
Using local storage localStorage to achieve no longer pop-up function - https://www.barben.cn/code/513.html
Love ( Eight )
Publish my comments
Cancel comment
Expression Map Thickening Delete line Centered Italics

In the eight year commentary, you need to bring your nickname and mailbox.

  • Nickname (required)
  • Mailbox (required)
  • Website