Home>Web design tutorial>HTML tutorial

html5 local storage

Author：Eve Cole Update Time：2025-03-15 21:48:02

Web Storage is a very important feature introduced by HTML5. It can store data locally on the client. Similar to HTML4 cookie, but it can achieve much more function than cookies. The size of cookies is limited to 4KB. Website 5MB.

Web Storage is divided into two types:

  • StSessionStorage
  • OrLocalStorage

It can be clearly seen from the literal meaning. SessionStorage saves the data in the session, and the browser is closed; LocalStorage has always saved the data on the client;

Whether it is SessionStorage, or LocalStorage, the APIs that can be used are the same. The commonly used is as follows (take LocalStorage as an example):

  • C Save data: localStorage.setItem (key, value);
  • C Read data: localStorage.getItem (key);
  • ： Delete a single data: LocalStorage.removeItem (key);
  • L Delete all data: localstorage.clear ();
  • 索 The key to get a certain index: localstorage.key (index);

As the above, both and value must be string. In other words, the API of the Web Storage can only operate the string.

Next, we develop a simple address book small program through Web Storage to demonstrate the use of related APIs; we must implement the following functions:

1. Enter the contact person, the contact has two fields, the mobile phone number, and the mobile phone number is used as the keystorage as the keystorage;

2. Find the owner according to the mobile phone number;

3. List all the contact information that currently preserved;

First, prepare a simple HTML page, as follows:

 <! Doctype html> <html> <gead> <meta charset = UTF-8/> <Title> HTML5 Local storage Web Storage articles </Title> </Head> <body> <Div style = border: 2px dashed # CCC; Width: 320px; Text-Align: Center;> <Label For = User_name> Name: </Label> <input Type = Text ID = User_name name = User_name class = text/> br/> <label for = mobilephone > Mobile: </Label> <input Type = Text ID = Mobilephone name = Mobilephone/> <br/> <input type = button onClick = Save () Value = new record/<hr/> <label for = searc = searc h_phone > Enter the mobile phone number: </label> <input type = text id = search_phone name = search_phone/> <input type = button onclick = find () value = find machine owner/> <p ID = find_result> <br < /> < /p> </div> <br/> <div ID = list> </div> </body> </html>

The interface shows the following:

To achieve the preservation of the contact, you only need to simply implement the following JS method:

 // Save data function save () {var microlephone = document.GetelementByid (mobilephone). Var user_name = document.getelementbyid (user_name). Value; localstorage.setItem (Mobilephone, User_name);}

To achieve the founder owner, the following JS method is implemented:

 // Find the data function find () {var search_phone = document.GetelementByid (search_phone). VAR NAME = LOCALSTOTOTEM (Search_phone); VAR FID_RESULT = document.GetelementByid (find_result); find_result.innerHtml = Search_phone + Yes: + name;}

To show all the saved contact information, you need to use the localStorage.Key (index) method, as follows:

 // Extract all the objects stored in LocalStorage and show the function loadall () {var list = document.GetelementByid (list); if (localStorage.Length> 0) {VAR Result = <Table border = ' 1 '>; Result+= <l> <TD> Name </td> <TD> Mobile Number </td> </tr>; for (var I = 0; I <LocalStorage.Length; I ++) {var microlephone = LocalStorage.key (i); VAR name = localstorage.getItem (mobilephone); result+= <tr> <TD>+name+</td> <TD>+Mobilephone+</TD> </TR>; Sult + = </table>; list.innerhtml = result;} else {list.innerhtml = The current data is empty, hurry up to join the contact person;}}

The effect is as follows:

Question: The above demonstrations have only two fields, names and mobile phone numbers. If you want to store more rich contact information, such as the company name and home address, how to achieve it? Isn't web storage only processed the string? At this time, you can use JSON's Stringify () method to transform complex objects into string and store them in Web Storage; when you read from Web Storage, you can convert to JSON objects through the PARSE () method of the JSON;

The following simple demonstration adds the contacts of the company's attributes to save the JS code:

 // Save the data function save () {var contact = new object; contact.user_name = document.GetelementByid (user_name). Value; EtelementByid (Mobilephone). Value; contact.comPany = document.GetelementByid (Company ). Var Str = json.stringify (contact); localstorage.setItem (contact.mobilephone, str); Loadall ();} all the objects stored in the localStorage are extracted and displayed to the interface. On the function loadall () {var list = document.GetelementByid (list); if (localstorage.length> 0) {var result = <table border = '1'>; result += <tr> </td> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD > Mobile phones </td> <td> Company </td> </tr>; for (var I = 0; I <localstorage.length; i ++) {var microlephone = localStorage.key (i); VAR Str = LocalStorage. getItem (Mobilephone); VAR Contract = JSON.PARSE (STR); Result+= <TD>+Contact.user_name+</TD> <TD>+Contact.mobilePhone+</td> <TD>+conf tact.company+ </td> </tr>;} result += </table>; list.innerhtml = result;} else {list.innerhtml = The current data is empty, hurry up to join the contact person;}}

The effect is as follows:

The above is the local storage of HTML5 introduced by Xiaobian. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!

Related Articles