HTML5 Local Storage

Веб -хранилище - это очень важная функция, введенная HTML5.

Веб -хранение разделено на два типа:

• StsessionStorage
• OrlocalStorage

Это может быть четко видно из буквального значения.

Является ли это SessionStorage или Local Storage, API, которые можно использовать, одинаковы.

• C Сохранить данные: localstorage.setitem (ключ, значение);
• C «Чтение данных»: localstorage.getitem (Key);
• ： Удалить один данные: localstorage.removeitem (key);
• L Удалить все данные: localstorage.clear ();
• 索 Ключ для получения определенного индекса: localstorage.key (index);

Как выше, оба и значение должны быть строкой.

Затем мы разрабатываем простую адресную книгу небольшую программу через веб -хранилище, чтобы продемонстрировать использование связанных API;

1. Введите контактное лицо, контакт имеет два поля: номер мобильного телефона, а номер мобильного телефона используется в качестве ключа в качестве KeyStorage;

2. Найдите владельца по номеру мобильного телефона;

3. Перечислите всю контактную информацию, которая сохранилась в настоящее время;

Во -первых, приготовьте простую HTML -страницу следующим образом:

 <! ; Ширина: 320px; : </Label> <input type = text id = mobilephone name = mobilephone/> <br/> <input type = кнопка onclick = save () value = new Record/<hr/> <label для = searc = searc h_phone> Введите номер мобильного телефона: </label> <input type = text id = search_phone name = search_phone/> <input type = кнопка onclick = find () value = find machine владелец/> <p id = find_result> <br </ > </p> </div> <br/> <div id = list> </div> </body> </html>

Интерфейс показывает следующее:

Чтобы достичь сохранения контакта, вам нужно только просто реализовать следующий метод JS:

 // Сохранить функцию данных () {var microlephone = document.getelementbyid (mobilephone).

Для достижения владельца -основателя реализован следующий метод JS:

 // Найти функцию данных Найти () {var search_phone = document.getelementbyid (search_phone).

Чтобы показать всю сохраненную контактную информацию, вам необходимо использовать метод localstorage.key (index), следующим образом:

 // Извлеките все объекты, хранящиеся в LocalStorage, и покажите функцию loadall () {var list = document.getElementbyId (list); <l> <td> Имя </td> <td> Мобильный номер </td> </tr>; i); .innerhtml = result;} else {list.innerhtml = текущие данные пусты, поторопитесь, чтобы присоединиться к контактному человеку;}}

Эффект заключается в следующем:

Вопрос: Приведенные выше демонстрации имеют только два поля, имена и номера мобильных телефонов. Разве веб -хранилище не обрабатывает только строку? В настоящее время вы можете использовать метод json's stringify () для преобразования сложных объектов в строку и хранить их в веб -хранилище;

Следующая простая демонстрация добавляет контакты атрибутов компании, чтобы сохранить код JS:

 // Сохранить функцию Data Save () {var contact = № json.stringify (contact); GetElementById (List); > <Td> <td> <td> Мобильные телефоны </td> <td> Компания </td> </tr>; LocalStorage.Key (i); > <Td>+conf tact.company+</td> </tr>;} result+= </table>; контактный человек;}}

Эффект заключается в следующем:

Приведенное выше - местное хранилище HTML5, представленное Xiaobian. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!