Хранение данных на клиенте может решить многие проблемы и уменьшить ненужную передачу данных:
1. Может сохранить статус программы: пользователь может знать, где он работает после закрытия браузера и открытия его.
2. Может кэшировать данные: нет необходимости получать много данных, которые не будут меняться с сервера каждый раз.
3. Может сохранить предпочтения пользователя: этот вид данных обычно не должен присутствовать на сервере.
Предыдущие практикиПеред локальным хранилищем HTML5, если мы хотим сохранить постоянные данные на клиенте, есть несколько вариантов:
1. http cookies. Недостаток http cookie очевиден. Они могут хранить только до 4 КБ данных, и каждый HTTP -запрос будет отправлен обратно на сервер и передается простой текст (если вы не используете SSL).
2. IE userData. UserData - это локальное решение для хранения, запущенное Microsoft во время войны в браузере в 1990 -х годах. Он использует атрибут поведения DHTML для хранения локальных данных, позволяя каждой странице хранить до 64 тыс. Данных и до 640 тыс. Данных на сайт. Недостатки пользовательских данных очевидны. Это не часть веб -стандарта. Если ваша программа должна только поддерживать IE, это в основном бесполезно.
3. Flash Cookies. Flash Cookie на самом деле не то же самое, что http cookie. Возможно, его название должно быть Flash Local Storage. Флэш -файлы cookie позволяют каждому сайту хранить данные не более чем на 100 тысяч по умолчанию. Если он превышает его, Flash автоматически запрашивает большее место для хранения у пользователя. Благодаря интерфейсу Flash ExternalInterface вы можете легко использовать локальное хранилище Flash через JavaScript. Проблема со Flash очень проста, потому что это Flash.
4. Google Gears. Gears-это плагин для браузера с открытым исходным кодом, выпущенный Google в 2007 году, с целью улучшения совместимости основных браузеров. Gears имеет встроенную встроенную базу данных SQL на основе SQLite и предоставляет унифицированный API для доступа к базе данных. После получения авторизации пользователя каждый сайт может хранить неограниченные данные в базе данных SQL. Проблема Gears в том, что сам Google больше не использует его.
Ослепительное разнообразие технологий приводит к вопросам совместимости браузера. Наиболее распространенными куки здесь могут быть печенье.
Новый опыт в HTML5В ответ на вышеуказанные задачи HTML5 предоставляет более идеальное решение: если вам нужно хранить данные, которые можно решить, просто используя пары ключей/значения, вы можете использовать веб -хранилище.
По сравнению с файлами cookie, веб -хранилище имеет много преимуществ, обобщенных следующим образом:
1. Большое пространство для хранения: каждое независимое пространство для хранения под IE8 составляет 10 м, а другие браузеры имеют немного разные реализации, но они намного больше, чем печенье.
2. Хранившийся контент не будет отправлен на сервер: когда будет установлен файл cookie, содержимое файла cookie будет отправлено вместе с запросом на сервере, который является пустой пустой пропускной способностью для локально хранимых данных. Данные в веб -хранилище существуют только локально и не будут взаимодействовать с сервером.
3. Более богатые и простые в использовании интерфейсы: веб-хранилище предоставляет более богатый набор интерфейсов, что облегчает работу данных.
4.
Классификация веб -хранилищаВеб -хранилище на самом деле состоит из двух частей: SessionStorage и LocalStorage.
SessionStorage используется для хранения данных в сеансе локально, к которым можно получить доступ только на страницах в том же сеансе, и данные будут уничтожены после завершения сеанса. Следовательно, SessionStorage-это не постоянное локальное хранилище, а только хранилище на уровне сеанса.
LocalStorage используется для постоянного локального хранилища, и данные никогда не истекают, если они не будут активно удалены.
Проверьте, поддерживается ли веб -хранилищеВеб -хранилище поддерживается в основных основных браузерах, но для того, чтобы быть совместимым со старыми браузерами, нам все еще нужно проверить, можно ли использовать эту технологию.
Первый метод: проверить, поддерживает ли браузер веб -хранилище, проверив, существует ли объект хранения:
if (typeof (stormation)! == "Undefined") {
// Да! LocalStorage и SessionStorage Поддержка!
// какой -то код ...
} еще {
// Извини! Нет поддержки веб -хранилища ..
}
Второй способ - проверить соответствующие объекты отдельно, например, проверить, поддерживает ли LocalStorage его:
if (typeof (localstorage) == 'не определен') {
Alert («Ваш браузер не поддерживает HTML5 LocalStorage. Попробуйте обновление»);
} еще {
// Да! LocalStorage и SessionStorage Поддержка!
// какой -то код ...
}
или:
if ('LocalStorage' в Window && Window ['LocalStorage']! == null) {
// Да! LocalStorage и SessionStorage Поддержка!
// какой -то код ...
} еще {
Alert («Ваш браузер не поддерживает HTML5 LocalStorage. Попробуйте обновление»);
}
или
if (!! localstorage) {
// Да! LocalStorage и SessionStorage Поддержка!
// какой -то код ...
} еще {
Alert («Ваш браузер не поддерживает HTML5 LocalStorage. Попробуйте обновление»);
}
Очевидно, первый метод является самым прямым и простым.
Использование веб -хранилищаВ веб-хранилище хранится пары клавиш, а браузер хранит его как строку. Не забудьте преобразовать их в другие форматы, когда это необходимо.
За исключением различных видов использования SessionStorage и LocalStorage, список участников одинаково:
Key = значение: хранить пары значения ключа
setItem (key, значение): сохранение пары клавишных значений
getItem (ключ): получить пару значений ключей
removeItem (ключ): удалите все пары клавишных значений
clear (): очистить все пары клавишных значений
Длина: количество пар клавишных значений
Здесь нам все еще нужно подчеркнуть: тип значения в методе SetItem (ключ, значение) теоретически может быть любому типу, но на самом деле браузер вызовет метод ToString значения, чтобы получить его строковое значение и сохранить его локально. Поэтому, если это пользовательский тип, вам нужно самостоятельно определить значимый метод ToString. Например, следующий пример используется в сочетании с json.stringify:
var person = {'name': 'rainman', 'age': 24};
localstorage.setitem ("me", json.stringify (человек));
Json.parse (localstorage.getitem ('me')). Имя; // 'Rainman'
/**
* Json.stringify, преобразовать данные JSON в строки
* Json.stringify ({'name': 'fred', 'age': 24}); // '{"name": "fred", "Age": 24}'
* Json.stringify (['a', 'b', 'c']); // '["a", "b", "c"]'
* Json.parse, AntiSolving json.stringify
* Json.parse ('["a", "b", "c"]') // ["a", "b", "c"]
*/
Кроме того, при добавлении пар клавишных значений, если количество добавленных, безопаснее проверить, есть ли какие-либо исключения, которые превышают предел:
пытаться {
localstorage.setitem (itemid, value.join (';'));
} catch (e) {
if (e == quota_exeeded_err) {
оповещение ('квота превысила!');
}
}
Метод веб -хранилища очень прост. Следующий пример - подсчитать количество щелчков на кнопке:
<! Doctype html>
<html>
<голова>
<Скрипт>
Функция clickCounter ()
{
if (typeof (stormation)! == "не определен")
{
if (localstorage.clickcount)
{
LocalStorage.ClickCount = number (LocalStorage.ClickCount) +1;
}
еще
{
LocalStorage.ClickCount = 1;
}
document.getElementById («Результат»). innerHtml = «Вы нажали кнопку» + LocalStorage.ClickCount + «Время (ы)»;
}
еще
{
document.getElementById ("result"). innerHtml = "Извините, ваш браузер не поддерживает веб -хранилище ...";
}
}
</script>
</head>
<тело>
<p> <Кнопка onclick = "clickCounter ()" type = "Кнопка"> Нажмите меня! </button> </p>
<div id = "result"> </div>
<p> Нажмите кнопку, чтобы увидеть увеличение счетчика. </p>
<p> Закройте вкладку браузера (или окно) и повторите попытку, и счетчик будет продолжать учитывать (не сброшен). </p>
</body>
</html>
В приведенном выше примере вы можете изменить LocalStorage на SessionStorage, несколько раз нажать кнопку и проверить эффект до и после закрытия браузера.
Существующие проблемыДефекты веб -хранилища в основном сосредоточены на ее безопасности, которые отражаются в следующих двух точках:
1. Браузер будет выделять независимое пространство для хранения для каждого домена, то есть сценарий не может получить доступ к пространству хранения в домене B в домене A, но браузер не будет проверять, является ли домен, где находится сценарий, такой же, как текущий домен. То есть сценарии, встроенные в домен A в домене B, все еще могут получить доступ к данным в домене B.
2. Данные, хранящиеся на месте, не зашифрованы и никогда не истекают, что очень легко вызвать утечку конфиденциальности.
Кроме того, для большего количества проблем, связанных с безопасностью, пожалуйста, обратитесь к ссылке в практической ссылке позже.
Список других спецификаций (только для понимания, может быть, он исчезнет в любое время).
В старом предложении HTML5, если вам нужно хранить сложные данные, вы можете использовать веб -базу данных, которая может использовать SQL, как клиентская программа (стандарт веб -базы данных был заброшен, поэтому вот краткое упоминание); GlobalStorageЭто также предлагается в HTML5. После закрытия браузера информация, хранящаяся с использованием GlobalStorage, все еще может быть сохранена. Как и Local Storage, информация, хранящаяся на любой странице в домене, может быть разделена всеми страницами, но в настоящее время только Firefox поддерживает ее.
Основной синтаксис:
• GlobalStorage ['Developer.mozilla.org'] - Все субдомены при разработчике.mozilla.org могут быть прочитаны и написаны через этот объект хранилища имен.
• GlobalStorage ['mozilla.org'] - Все веб -страницы под доменным именем mozilla.org можно прочитать и записано через этот объект хранилища имен.
• GlobalStorage ['org'] - Все веб -страницы под доменным именем.
• GlobalStorage [''] - Любая веб -страница под любым доменным именем может быть прочитана и написана через этот объект хранилища пространства имен.
Свойства метода:
• setItem (ключ, значение) - установить или сбросить значение ключа.
• getItem (ключ) - получает значение ключа.
• Удалить (ключ) - удаляет значение ключа.
• Установить значение ключа: window.globalStorage [planabc.net] .key = value;
• Получить значение ключа: value = window.globalStorage [planabc.net] .key;
Другие функции:
• Время истечения такое же, как и LocalStorage, а некоторые другие функции также похожи на LocalStorage.
• Firefox теперь поддерживает только GlobalStorage Storage в рамках текущего домена. Использование общего домена вызовет аналогичный код ошибки ошибки ошибки: 1000.
IndexeddbНаконец, мы хотим представить IndexedDB. По сравнению с двумя другими спецификациями, только Firefox в настоящее время реализует IndexedDB (кстати, Mozilla говорит, что они никогда не будут реализовать базу данных Web SQL), но Google заявил, что рассматривает возможность добавления поддержки IndexDB к Chrome.
IndexedDB представляет концепцию хранилища объектов, которая немного похожа на базу данных SQL, где вы можете хранить записи в базе данных, и каждая запись может иметь много полей, в каждом поле есть конкретный тип данных, вы можете выбрать подмножество записей и пройти его с помощью курсора, в то время как все изменения в хранилище объектов основаны на транзакции.
Для получения дополнительной информации, пожалуйста, обратитесь к документации о IndexedDB в Firefox в ссылке на использование позже.
Практическая ссылка:Официальный документ: http://www.w3schools.com/html5/
Шаблон забот: http://www.cuoxin.com/w3school/html5/
Безопасность локального хранилища: http://www.mhtml5.com/2012/03/4586.html
Экспериментальные особенности Firefox IndexedDB: https://developer.mozilla.org/en-us/docs/indexeddb