Веб -хранилище - это очень важная функция, введенная HTML5.
Веб -хранение разделено на два типа:
Это может быть четко видно из буквального значения.
Является ли это SessionStorage или Local Storage, API, которые можно использовать, одинаковы.
Как выше, оба и значение должны быть строкой.
Затем мы разрабатываем простую адресную книгу небольшую программу через веб -хранилище, чтобы продемонстрировать использование связанных 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!