Веб -хранилище является очень важной функцией, введенной HTML5. Он может хранить данные локально на стороне клиента. Он похож на файлы cookie HTML4, но он может реализовать функции гораздо более мощные, чем файлы cookie. Размер печенья ограничен 4 кб. Чиновник веб -хранилища рекомендует 5 МБ на веб -сайт.
Веб -хранение разделено на два типа :SessionStorage
LocalStorage
Из буквального смысла ясно видно, что SessionStorage сохраняет данные в сессии, а браузер закрыт; LocalStorage сохраняет данные локально на клиенте;
Будь то SessionStorage или LocalStorage, API, которые можно использовать, одинаковы. Обычно используемые следующие (в качестве примера принимают LocalStorage):
Сохранить данные: localstorage.setitem (ключ, значение);
Читать данные: localstorage.getitem (key);
Удалить отдельные данные: localstorage.removeitem (key);
Удалить все данные: localstorage.clear ();
Получить ключ определенного индекса: localstorage.key (index);
Как упомянуто выше, как ключ, так и значение должны быть строками. Другими словами, API веб -хранилища может только манипулировать строками.
Далее мы разрабатываем простой апплет адресной книги через веб -хранилище, чтобы продемонстрировать, как использовать связанные API; Мы хотим реализовать следующие функции:
Введите контактный человек. У контактного человека есть два поля: имя и номер мобильного телефона, и используйте номер мобильного телефона в качестве ключа для хранения его в LocalStorage;
Найти владельца по номеру мобильного телефона;
Список всех в настоящее время сохраненной контактной информации;
Во -первых, приготовьте простую HTML -страницу следующим образом :<! Doctype html>
<html>
<голова>
<meta charset = "utf-8"/>
<title> html5 локальное хранилище Статья о хранилище </title>
</head>
<тело>
<div style = "border: 2px пунктир #ccc; ширина: 320px; text-align: center;">
<метка для = "user_name"> name: </label>
<input type = "text" id = "user_name" name = "user_name"/>
<br/>
<Метка для = "Mobilephone"> Мобильный телефон: </label>
<input type = "text" id = "mobilephone" name = "mobilephone"/>
<br/>
<input type = "button" onclick = "save ()" value = "добавить запись"/>
<HR/>
<метка для = "search_phone"> Введите номер мобильного телефона: </label>
<input type = "text" id = "search_phone" name = "search_phone"/>
<input type = "button" onclick = "find ()" value = "Найти владелец"/>
<p id = "find_result"> <br/> </p>
</div>
<br/>
<div id = "list">
</div>
</body>
</html>
Интерфейс отображается следующим образом :Чтобы сохранить контакты, вам нужно только просто реализовать следующий метод JS:
// Сохранить данные
function save () {
var mobilephone = document.getElementbyId ("mobilephone"). value;
var user_name = document.getElementbyid ("user_name"). Value;
localstorage.setitem (mobilephone, user_name);
}
Чтобы реализовать владельца поиска, реализован следующий метод JS :// Найти данные
function find () {
var search_phone = document.getElementbyId ("search_phone"). value;
var name = localstorage.getitem (search_phone);
var find_result = document.getElementById ("find_Result");
Владелец find_result.innerhtml = search_phone + "IS:" + name;
}
Чтобы отобразить всю сохраненную контактную информацию, вам необходимо использовать метод localstorage.key (index), следующим образом:
// Извлеките все объекты, хранящиеся в LocalStorage, и отображать их на интерфейсе
function loktall () {
var list = document.getElementbyId ("list");
if (localstorage.length> 0) {
var result = "<table border = '1'>";
Результат += "<Tr> <td> имя </td> <td> номер мобильного телефона </td> </tr>";
for (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
var name = localstorage.getitem (mobilephone);
Результат+= "<Tr> <td>"+name+"</td> <td>"+mobilephone+"</td> </tr>";
}
Результат += "</table>";
list.innerhtml = result;
}еще{
list.innerhtml = "Данные в настоящее время пусты, поторопитесь и начните добавлять контакты";
}
}
Эффекты следующие:
Вопрос: Как уже упоминалось выше, есть только 2 поля, имя и номер мобильного телефона. Если вы хотите внести более богатую контактную информацию, такую как название компании, домашний адрес и т. Д., Как ее достичь? Разве веб -хранилище не способно обрабатывать строки? В настоящее время вы можете использовать метод json stringify () для преобразования сложных объектов в строки и хранить их в веб -хранилище; При чтении из веб -хранилища вы можете преобразовать их в объекты JSON с помощью метода json's parse ();
Следующая краткая демонстрация добавляет атрибуты компании для сохранения кода JS :// Сохранить данные
function save () {
var contact = новый объект;
contact.user_name = document.getElementByid ("user_name"). Value;
contact.mobilephone = document.getElementByid ("mobilephone"). value;
contact.company = document.getElementById ("Компания"). Значение;
var str = json.stringify (contact);
localstorage.setitem (contact.mobilephone, str);
LokeAll ();
}
// Извлеките все объекты, хранящиеся в LocalStorage, и отображать их на интерфейсе
function loktall () {
var list = document.getElementbyId ("list");
if (localstorage.length> 0) {
var result = "<table border = '1'>";
Результат += "<Tr> <td> имя </td> <td> mobile </td> <td> Компания </td> </tr>";
for (var i = 0; i <localstorage.length; i ++) {
var mobilephone = localstorage.key (i);
var str = localstorage.getitem (mobilephone);
var contact = json.parse (str);
result+= "<tr> <td>"+contact.user_name+"</td> <td>"+contact.mobilephone+"</td> <td>"+contact.company+"</td> </tr>";
}
Результат += "</table>";
list.innerhtml = result;
}еще{
list.innerhtml = "Данные в настоящее время пусты, поторопитесь и начните добавлять контакты";
}
}
Эффекты следующие: