Содержание этого урока состоит в том, чтобы ввести веб-хранилище, которое использует его для хранения данных о парах ключевых значений в браузере. Он функционально похож на предыдущие файлы cookie, но он лучше, и хранимые данные могут быть больше. Существует два типа веб -хранилища: локальное хранение и хранение сессии, которые используют один и тот же механизм реализации, за исключением того, что видимость и жизненный цикл различны.
1. Используйте локальное хранилищеМы используем объект LocalStorage для доступа к локальному хранилищам, который возвращает объект хранения, который используется для хранения данных о парах клавиш. Он имеет следующие свойства и методы:
clear (): четко хранить данные пары ключевых значений;
getItem (<ключ>): получить значение через ключ;
Ключ (<dindex>): получить значение ключа через индекс;
Длина: возвращает количество пар клавишных значений;
removeItem (<ключ>): удалите указанные данные через ключ;
setItem (<chey>, <value>): добавьте пару клавиш. Когда существует пара ключевых значений указанного ключа, операция обновления реализована;
[<клавиша>]: используйте ключ, чтобы получить указанное значение с помощью ShareScript.
Объект хранения позволяет нам хранить данные пары ключевых значений в форме строк. Ключ уникален, что означает, что когда мы используем метод SetItem для добавления пара клавиш, если значение ключа уже существует, будет реализована операция обновления. Давайте посмотрим на следующий пример:
<! Doctype html>
<html>
<голова>
<title> Пример </title>
<style>
тело> *{float: left;}
Таблица {Border-Collapse: Collapsse; Margin-Left: 50px;}
th, td {padding: 4px;}
th {text-align: right;}
Вход {граница: тонкий сплошной черный; накладка: 2px;}
Метка {min-width: 50px; дисплей: inline block; text-align: right;}
#countmsg, #buttons {margin-left: 50px; margin-top: 5px; margin-bottom: 5px;}
</style>
</head>
<тело>
<div>
<div>
<babel> Ключ: </label> <input id = "key" Placeholder = "enter Key"/> </div>
<div>
<babel> значение: </label> <input id = "value" placeholder = "enter value"/> </div>
<div id = "кнопки">
<button id = "Добавить"> Добавить </button>
<button id = "clear"> clear </button>
</div>
<p id = "countmsg"> есть <span id = "count"> </span> элементы </p>
</div>
<таблица идентификатора = "data">
<tr>
<Th> Количество предметов: </th>
<td id = "count">-</td>
</tr>
</table>
<Скрипт>
DisplayData ();
var buttons = document.getElementsbytagname ('button');
для (var i = 0; i <buttons.length; i ++) {
кнопки [i] .onclick = handlebuttonpress;
}
функция handlebuttonpress (e) {
Switch (e.target.id) {
Case 'Add':
var key = document.getElementbyId ('key'). value;
var value = document.getElementbyId ('value'). value;
localstorage.setitem (ключ, значение);
перерыв;
case 'clear':
localstorage.clear ();
перерыв;
}
DisplayData ();
}
функция DisplayData () {
var tableElement = document.getElementbyId ('data');
tableElement.innerhtml = '';
var itemcount = localstorage.length;
document.getElementById ('count'). innerHtml = itemCount;
for (var i = 0; i <itemCount; i ++) {
var key = localstorage.key (i);
var val = localstorage.getitem (key);
tableElement.innerhtml + = '<tr> <th>' + key + ': </th> <td>' + val + '</td> </tr>';
}
}
</script>
</body>
</html>
Давайте посмотрим на результаты работы :Браузер не может удалить данные, которые мы создали через LocalStorage, если пользователь не удалит их.
2. Слушайте события храненияДанные, хранящиеся через локальное хранилище, видны с одинаковым документом. Например, если вы открываете два браузера Chrome для доступа к одному и тому же адресу URL, локальное хранилище, созданное на любой странице, также видно на другой странице. Однако, если вы откроете один и тот же адрес URL -адреса с другим браузером (например, Firefox), локальное хранилище является невидимым, потому что у них разные источники. Событие хранения используется для прослушивания изменений в содержимовом хранилище. Посмотрим, какие свойства он содержит:
Ключ: возвращает измененное значение ключа;
OldValue: возвращает значение перед изменением значения ключа;
NewValue: возвращает новое значение значения, значение ключа которого изменилось;
URL: адрес URL -адреса, который изменился;
Storagearea: возвращает измененный объект хранения (локальное хранилище или хранение сеанса).
Давайте посмотрим на пример ниже:
<! Doctype html>
<html>
<голова>
<название> хранилище </title>
<style>
Таблица {Border-Collapse: Collapsse;}
th, td {padding: 4px;}
</style>
</head>
<тело>
<таблица идентификатора = "data">
<tr>
<th> Ключ </th>
<Th> OldValue </th>
<th> newvalue </th>
<Th> url </th>
<th> Storagearea </th>
</tr>
</table>
<Скрипт>
var tableElement = document.getElementbyId ('data');
window.onstorage = function (e) {
var row = '<tr>';
row + = '<td>' + e.key + '</td>';
row + = '<td>' + e.levalue + '</td>';
row + = '<td>' + e.newvalue + '</td>';
row + = '<td>' + e.url + '</td>';
row + = '<td>' + (e.storagearea == localstorage) + '</td> </tr>';
tableElement.innerhtml += row;
}
</script>
</body>
</html>
В примере 1 мы добавляем, удаляем и изменяем данные хранилища и будем отображаться на странице примера 2. Пример 2 обычно работает в браузере Chrome, Firefox не отвечает, а другие браузеры не проверяют его.
Результаты работы :3. Используйте хранение сеанса
Хранение сеанса такое же, как и локальное хранилище, за исключением того, что его доступность ограничена текущей страницей, и оно исчезнет после закрытия страницы. Мы получаем доступ к нему через SessionStorage.
<! Doctype html>
<html>
<голова>
<title> Пример </title>
<style>
тело> *{float: left;}
Таблица {Border-Collapse: Collapsse; Margin-Left: 50px;}
th, td {padding: 4px;}
th {text-align: right;}
Вход {граница: тонкий сплошной черный; накладка: 2px;}
Метка {min-width: 50px; дисплей: inline block; text-align: right;}
#countmsg, #buttons {margin-left: 50px; margin-top: 5px; margin-bottom: 5px;}
</style>
</head>
<тело>
<div>
<div>
<babel> Ключ: </label> <input id = "key" Placeholder = "enter Key"/> </div>
<div>
<babel> значение: </label> <input id = "value" placeholder = "enter value"/> </div>
<div id = "кнопки">
<button id = "Добавить"> Добавить </button>
<button id = "clear"> clear </button>
</div>
<p id = "countmsg"> есть <span id = "count"> </span> элементы </p>
</div>
<таблица идентификатора = "data">
<tr>
<Th> Количество предметов: </th>
<td id = "count">-</td>
</tr>
</table>
<iframe src = "storage.html"> </iframe>
<Скрипт>
DisplayData ();
var buttons = document.getElementsbytagname ("кнопка");
для (var i = 0; i <buttons.length; i ++) {
кнопки [i] .onclick = handlebuttonpress;
}
функция handlebuttonpress (e) {
Switch (e.target.id) {
Case 'Add':
var key = document.getElementbyId ("key"). value;
var value = document.getElementbyId ("value"). value;
SessionStorage.SetItem (ключ, значение);
перерыв;
case 'clear':
SessionStorage.clear ();
перерыв;
}
DisplayData ();
}
функция DisplayData () {
var tableElement = document.getElementbyId ('data');
tableElement.innerhtml = '';
var itemCount = sessionStorage.length;
document.getElementById ('count'). innerHtml = itemCount;
for (var i = 0; i <itemCount; i ++) {
var key = sessionStorage.key (i);
var val = sessionstorage.getitem (key);
tableElement.innerhtml + = "<tr> <th>" + key + ": </th> <td>" + val + "</td> </tr>";
}
}
</script>
</body>
</html>
Эффект бега :Если вы внесете какие -либо изменения в примере 3, страница в примере 2 не изменится.
Суммировать :SessionStorage используется для хранения данных в сеансе локально, к которым можно получить доступ только на страницах в том же сеансе, и данные будут уничтожены после завершения сеанса. Следовательно, SessionStorage-это не постоянное локальное хранилище, а только хранилище на уровне сеанса.
LocalStorage используется для постоянного локального хранилища, и данные никогда не истекают, если они не будут активно удалены.
Разница между веб -хранилищем и файлами cookie: концепция веб -хранилища аналогична файлам cookie, разница в том, что она предназначена для более крупного хранения емкости. Размер cookie ограничен, и каждый раз, когда вы просите новую страницу, будет отправлено cookie, что невидимо тратит пропускную способность. Кроме того, файлы cookie должны быть указаны, и не может быть вызвано между доменами. Кроме того, Web Storage имеет SetItem, GetItem, RemoveItem, Clear и другие методы. В отличие от печенья, фронтальные разработчики должны сами инкапсулировать Setcookies и Getcookies. Кроме того, каждый домен (включая субдомен) веб -хранилища имеет независимое пространство для хранения, и каждое пространство для хранения является полностью независимым, поэтому он не приведет к путанице данных.
Но файлы cookie также необходимы: функция файлов cookie заключается в взаимодействии с сервером и существует как часть спецификации HTTP, в то время как веб -хранилище создается только для хранения данных локально.
Скачать исходный код