LocalStorage local storage and localstorage

LocalStorage local storage and localstorage

We believe that HTML5 provides two new features: localStorage and sessionStorage. Based on these two features, we can implement offline and session storage for web resources, if you are still using cookies to temporarily store network resources, it will be too out. Why not use such a good thing?

The following is a simple example to illustrate the usage of localStorage, which is relatively easy to implement. For example, most websites now record the visitor's first visit information. If it is the first visit to the browser, a pop-up box such as an advertisement box will pop up on the interface, after accessing the website, you will not be able to see the pop-up box. This effect is actually achieved using localStorage (previously using cookies.

Now we take the bootstrap modal box as an example. When a user first enters the website, the modal box is displayed, and then it is no longer displayed unless the user clears the cache data of the browser. Our html code is as follows:

1 <div class = "modal hide fade" id = "demo" data-show = "true" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> 2 <div class = "modal-dialog"> 3 <div class = "modal-content"> 4 <div class = "modal-header"> 5 <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"> <span aria-hidden = "true"> & times; </span> </button> 6 

Well, we have easily built a beautiful pop-up window, which is hidden by default. Now all we have to do is display this pop-up window when the visitor visits it for the first time, next we will compile the JS Code:
First, we will record the information of the visitor's first visit. If this is the first visit, we will assign a variable value of "1 ", when a visitor accesses the variable again, the browser searches for the value of this variable. If the value is 1, the browser performs an operation. If the value is not 1, the browser performs another operation. The Code is as follows:
1 // whether the visitor accesses the local storage for the first time 2 var strModel = "value"; // defines the attribute name of the storage object 3 var storeDisplay = function () {4 var modelDisplay = 1; // define the storage object property value 5 // storage, IE6 ~ IE7 cookie other browsers HTML5 local storage 6 if (window. localStorage) {7 localStorage. setItem (strModel, modelDisplay); // local storage 8} 9 else {10 Cookie. write (strModel, modelDisplay); // store cookies 11} 12 };
OK, our storage code has been written, and we will trigger it next. Call the storeDisplay () function above, because some earlier Browsers Do not support localStorage, therefore, before triggering, you must determine whether the browser supports localStorage. If not, use Cookie storage for full compatibility. The Code is as follows:
1 // check whether the pop-up window is displayed. 2 var strStoreDate = window. localStorage? LocalStorage. getItem (strModel): Cookie. read (strModel); // checks whether the browser supports localStorage 3 4 if (strStoreDate! = "1") {// If the attribute value is not 1, the pop-up box 5 $ ('# demo') is displayed '). removeClass ("hide"); 6 $ ('# demo '). modal ({7 show: true // pop-up box 8}); 9} 10 11 storeDisplay (); // storage information, set the storage attribute to "1"
In this way, when a visitor accesses the strStoreDate for the first time, the value of strStoreDate is actually 'undefinded', not equal to '1', so the if statement will be executed to display the dialog box, then, set the storage attribute to '1'. When the value of the attribute is '1' for the second access, the statement in if is not executed. The dialog box is hidden by default, OK.
Through the above example, we use localStorage to easily implement a function to record whether a visitor accesses the site for the first time.
LocalStorage. setItem (strModel, modelDisplay)
And
　　LocalStorage. getItem (strModel)
It is the most important step to set and obtain attribute values,
Similarly, if we need to use sessionStorage to store the information of the visitor in the current session, we only need to replace localStorage with sessionStorage, so that the information will not be lost when we refresh the page.
How about it? You have to try it out!