Easily implement Localstorage local storage

I believe you all know HTML5 provides localstorage and Sessionstorage two new features, based on these two features we can implement the Web resources offline and session storage, if you are still using cookies temporarily storage network resources, it is too out, Why don't you have something so nice to put on?

Here I will use a simple example to illustrate the use of localstorage, it is relatively easy to achieve. For example, most sites now have a record of the visitor's first access information, if the first visit to the browser on the interface will pop up an ad box, such as a frame, and then visit the site will not see the box, the effect is actually used localstorage (before using cookies) realized.

So now we take the bootstrap modal box as an example, when the user first enters the site when the modal box pops up, and then no longer pops up, unless the user clears the browser's cached data. Our HTML code is as follows:

1 <Divclass= "Modal Hide Fade"ID= "Demo"Data-show= "true"TabIndex= "-1"role= "Dialog"Aria-labelledby= "Mymodallabel"Aria-hidden= "true">2     <Divclass= "Modal-dialog">3             <Divclass= "Modal-content">4                 <Divclass= "Modal-header">5                     <Buttontype= "button"class= "Close"Data-dismiss= "Modal"Aria-label= "Close"><spanAria-hidden= "true">&times;</span></Button>6                     <H1class= "Modal-title text-center step-show1"ID= "Startmodallabel"><span>Bullet Box Demo</span></H1>    7                 </Div>8                 <Divclass= "Modal-body">9 Bullet Box ContentsTen                 </Div> One            </Div> A        </Div> - </Div>                                    

Well, we've easily set up a nice pop-up window, which is hidden by default, and now all we have to do is show the pop-up window The first time a visitor visits, and then we'll write the JS code:

First we record the visitor's first access information, if it is the first time we have given a variable value of "1", when the visitor visits again when the browser will look for the value of the variable, if the 1 to do something, if not 1 to do another operation, the code is as follows:

1 //store guest locally for first time access2 varStrmodel= "Value";//defining property names for storage objects3 varstoredisplay=function(){4     varModeldisplay=1;//defining property values for storage objects5     //storage, Ie6~ie7 cookies other browsers HTML5 local storage6     if(window.localstorage) {7Localstorage.setitem (Strmodel,modeldisplay);//for local storage8     }9     Else {TenCookie.write (Strmodel,modeldisplay);//cookies are stored One     } A};

OK, our storage code has been written, then we will trigger it, call the above Storedisplay () function, and because some of the low-version browser does not support Localstorage, So before triggering also to determine whether the browser supports Localstorage, does not support the use of cookie storage, to achieve full compatibility. The code is as follows:

1 //detects whether a popup is displayed2 varStrstoredate=window.localstorage? Localstorage.getitem (Strmodel): Cookie.read (Strmodel);//detect if the browser supports Localstorage3  4 if(strstoredate!= "1") {//if the property value is not 1, the bullet box is displayed5$ (' #demo '). Removeclass ("Hide");6$ (' #demo '). Modal ({7Showtrue  //Show Bullet Box8      });9 }Ten  OneStoredisplay ();//storing information, setting the storage property to "1"

In this way, when the visitor first visit the value of Strstoredate is actually ' undefinded ', not equal to ' 1 ', so will execute if the statement shows the box, and then set the storage property to ' 1 ', and when the visitor second access to the property value is ' 1 ' Will not execute if the statement inside the box or the default hidden state, OK, complete.

Using the above example, we use Localstorage to easily implement a feature that records whether a visitor is first accessed, using

Localstorage.setitem (Strmodel,modeldisplay)

And

　　Localstorage.getitem (Strmodel)

To set and get property values is the most important step,

Similarly, if we need to use Sessionstorage to store the information of the visitor in the current session simply replace the localstorage with Sessionstorage, so that the information will not be lost when we refresh the page.

What, isn't it powerful? Still useless children's shoes hurry up and try it!

Easily implement Localstorage local storage