Big Bear Learn HTML5 series------WebStorage (client lightweight storage scheme)

First, the opening analysis

Hi, hello, everyone! Big Bear June again and everyone met, (*^__^*) hehe ..., this series of articles is mainly to learn HTML5 related knowledge points, to learn API knowledge points for the entrance, the introduction of an example,

Let everyone step-by-step experience "h5" can do what, as well as in the actual project how to use the reasonable application to achieve the freedom, the perfect harness O (∩_∩) o~, well, nonsense not much to say, directly into the theme of today,

Today is mainly about the "WebStorage API" and the role in the client browser, and will introduce a practical example to explain the prototype paradigm, let us first look at the "WebStorage API":

　　

HTML5 provides two new ways to store data on the client:

　　Localstorage-Data storage with no time limit (persistent local)

Sessionstorage-Data storage for a session (memory-mode storage)

　　

Previously, these were all done by cookies. However, cookies are not suitable for storing large amounts of data because they are passed by each request to the server, which makes the cookie slow and inefficient.

With the development of Web application, the client storage is used more and more, and the way to realize the client storage is various. The simplest and best-compatible scenario is a cookie, but as a true client store, the cookie has many fatal wounds.

In addition, in IE6 and above can also use UserData Behavior, under Firefox can use Globalstorage, in the environment with flash plugin can use Flash Local Storage, But there are limitations to compatibility in these ways, so the real use is not ideal.

In view of the above situation, the more ideal solution is given in HTML5: if you need to store complex data, you can use Web database, you can use SQL like a client program (but the Web database standard is currently deadlocked And the browsers that are now implemented are very limited.)

If you need to store only the simple data that can be solved with key/value, then use the Web Storage. This paper mainly introduces the specific situation of Web storage from various aspects.

　

Browser support scenarios, such as:

　　　　

Two, for a small example, to understand WebStorage

A small feature requirement: Record the number of times a user visits a page

See the following code:

1$(function(){2     if(!_issupportwebstorage ()) {3         Throw NewError ("not support WebStorage APIs!")) ;4     }5 _storepagecount ();6 alert (_loadpagecount ())7     8 }) ;9 function_storepagecount () {Ten     varStorage =Window.localstorage; One     varPageloadcount = Storage.getitem ("Pageloadcount") ; A     varStepofcount = 1 ; -     if(!Pageloadcount) { -Storage.setitem ("Pageloadcount", Stepofcount);  the     } -     Else{ -Storage.setitem ("Pageloadcount", parseint (Pageloadcount) +stepofcount); -     } + } ; - function_loadpagecount () { +     varStorage =Window.localstorage; A     returnStorage.getitem ("Pageloadcount") ; at } ; - function_issupportwebstorage () { -     return!!Window.localstorage; -} ;

Operating effect:

Number of times to print out the page each time it is refreshed

　　　　

Keep track of local data:

　　　　

Very clear, then the data has been persisted to the local hard disk, haha ha!

　The "WebStorage API" is a quick Walkthrough:

length------The total number of key/value pairs stored in the current storage object

SetItem (key, value)-------Set the value of the key object to Value,value to string, when the setting fails, such as when the user disables local storage, or if the local storage exceeds the limit size, Throw Quotaexceedederror Error

GetItem (Key)------returns the value corresponding to key, if not present, returns null

RemoveItem (Key)------If key is present in the storage, the key/value corresponding to the key is removed from the storage object; Note: The deleted value is not returned, if key does not exist in storage, no processing is done

Clear ()------clears all Key-value values on the storage object

Key (Index)------Returns the key value at the corresponding position of index, when index>length, returns NULL, adds a Key-value value to the storage object, the key retrieved via key is not fixed, followed by the for ... in traversing a normal object, depending on the implementation of the browser

Here are some examples of equivalent operations:

　　Localstorage.author = "Bigbear";
localstorage["Author"] = "bigbear";
Localstorage.setitem ("Author", "Bigbear");
　

Third, introduce the example

Today to share a message in real-time save example.

The JS code is as follows:

1 functionUpinfo () {2     varLstorage =Window.localstorage;3     varShow = Window.document.getElementById ("Show");4     if(window.localStorage.myBoard) {5Show.value =Window.localStorage.myBoard;6}Else {7         varinfo = "No messages yet";8Show.value = "No messages yet";9     }Ten } One functionAddinfo () { A     varinfo = window.document.getElementById ("T1"); -     varLstorage =Window.localstorage; -     if(lstorage.myboard) { the         varDate =NewDate (); -Lstorage.myboard + = T1.value + "\ n Release Time:" + date.tolocalestring () + "\ n"; -}Else { -         varDate =NewDate (); +Lstorage.myboard = T1.value + "\ n Release Time:" + date.tolocalestring () + "\ n"; -     } + upinfo (); A } at functionCleaninfo () { -Window.localStorage.removeItem ("Myboard"); - upinfo (); - } -Upinfo ();

　

The HTML is as follows:

1 2   3    4    5    6    7    8    9    Ten     One     a    -  </body>

Run the effect as follows:

　　　　

(iv), concluding

(1), understand how the WebStorage API is used and the purpose used in the specific instance is to solve the problem.

(2), the difference between two core APIs.

(3), constantly reconstruct the above example, how to make reasonable reconstruction that? Do not design too much, to ease, the recommended way is the process of design and object-oriented thinking design combination.

hahaha, the end of this article, not to be continued, hope and we have enough communication, common progress ... To shout ... (*^__^*)

Big Bear Learn HTML5 series------WebStorage (client lightweight storage scheme)