Основной учебник HTML5

HTML5 API

HTML5 медиа

HTML5 графика

Локальная база данных HTML5 Семантические элементы HTML5

Клиентское хранение HTML5

HTML5 клиентское хранилище, лучше способ локального хранения, чем файлы cookie. Использование HTML5 позволяет хранить данные просмотра пользователей локально.

Что такое Web-хранилище клиента HTML5?

Использование HTML5 позволяет хранить данные просмотра пользователей локально.

Раньше для локального хранения использовались файлы cookie. Но Web-хранилище требует большей безопасности и скорости. Эти данные не хранятся на сервере, но они используются только для запросов данных пользователя на веб-сайте. Оно также может хранить大量的 данных, не влияя на производительность веб-сайта.

Данные существуют в виде пар ключ/значение, данные веб-страницы разрешены только для использования этой страницы.

Поддержка браузерами

Microsoft Internet Explorer 8+, Firefox, Opera, Chrome и Safari поддерживают Web-хранилище.

Внимание: Microsoft Internet Explorer 7 и более ранние версии не поддерживают web-хранилище.

localStorage и sessionStorage　

Два объекта для хранения данных клиента:

localStorage - используется для долгосрочного хранения данных всего сайта, сохраненные данные не имеют срока действия, до тех пор, пока они не будут удалены вручную.
sessionStorage - используется для временного хранения данных в одном окне (или вкладке), данные будут удалены после закрытия окна или вкладки.

Прежде чем использовать web хранение, следует проверить, поддерживает ли браузер localStorage и sessionStorage:

Пример

if (typeof(Storage)!=="undefined")
{
　　　　// Да! Поддерживается localStorage и sessionStorage объекты!
　　　　// Некоторый код.....
}
　　　　// Извините! Не поддерживается web хранение.
}

Объект localStorage

Данные, хранящиеся в объекте localStorage, не имеют ограничений по времени. Через день, вторую неделю или следующий год данные все еще будут доступны.

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сети (oldtoolbag.com)</title>　
</head>
<body>
<div id="result"></div>
<script>
if (typeof(Storage)!=="undefined")
{
　　localStorage.sitename = "Основной учебник сети";
　　document.getElementById("result").innerHTML = "Название сайта: " + localStorage.sitename;
}
else
{
　　document.getElementById("result").innerHTML="Извините, ваш браузер не поддерживает web хранение.";
}
</script>
</body>
</html>

Проверьте, посмотрите <

Пример анализа:

Создать localStorage ключ/значение с помощью key="sitename" и value="Основной учебник сети".
Искать значение по ключу "sitename" и вставить данные в элемент с id="result".

Примеры также можно написать так:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сети (oldtoolbag.com)</title>　
</head>
<body>
<script>
// Сохранить
localStorage.sitename = "Основной учебник сети";
// Найти
document.getElementById("result").innerHTML = localStorage.sitename;
</script>
</body>
</html>

Проверьте, посмотрите <

Удалить "sitename" из localStorage:

Пример

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Основной учебник сети (oldtoolbag.com)</title>　
</head>
<body>
localStorage.removeItem("sitename");
</body>
</html>

Проверьте, посмотрите <

Будь то localStorage, или sessionStorage, доступные API одинаковы, наиболее часто используемые из которых приведены ниже (например, для localStorage):

Сохранение данных: localStorage.setItem(key, value);
Чтение данных: localStorage.getItem(key);
Удалить отдельные данные: localStorage.removeItem(key);
Удалить все данные: localStorage.clear();
Получить ключ по индексу: localStorage.key(index);

Совет: Ключ/значение обычно хранятся как строки, но вы можете преобразовать этот формат по своему усмотрению.

Ниже приведен пример того, сколько раз пользователь нажал на кнопку.

Преобразование строковых значений в числовой тип в коде:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник сети (oldtoolbag.com)</title>　　　　　
<script>
function clickCounter()
{
　　　　if (typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if (localStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=Number(localStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　localStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="Вы кликнули на кнопку " + localStorage.clickcount + " раз";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="Извините, ваш браузер не поддерживает web хранение.";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Нажми меня!</button></p>
<div id="result"></div>
<p>Нажмите эту кнопку, чтобы увидеть увеличение счетчика.</p>
<p>Закройте вкладку (или окно) браузера, заново откройте эту страницу, и счетчик продолжит计数 (не сброс).</p>
</body>
</html>

Проверьте, посмотрите <

Объект sessionStorage

Метод sessionStorage предназначен для хранения данных в сессии. Когда пользователь закрывает окно браузера, данные удаляются.

Как создать и получить доступ к sessionStorage:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник сети (oldtoolbag.com)</title>　
<script>
function clickCounter()
{
　　　　if (typeof(Storage)!=="undefined")
　　　　{
　　　　　　　　if (sessionStorage.clickcount)
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
　　　　　　　　}
　　　　　　　　else
　　　　　　　　{
　　　　　　　　　　　　sessionStorage.clickcount=1;
　　　　　　　　}
　　　　　　　　document.getElementById("result").innerHTML="В этой сессии вы кликнули на кнопку " + sessionStorage.clickcount + " раз";
　　　　}
　　　　else
　　　　{
　　　　　　　　document.getElementById("result").innerHTML="Извините, ваш браузер не поддерживает web хранение";
　　　　}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Нажми меня!</button></p>
<div id="result"></div>
<p>Нажмите эту кнопку, чтобы увидеть увеличение счетчика.</p>
<p>Закройте вкладку браузера (или окно) и откройте эту страницу заново, счетчик будет сброшен.</p>
</body>
</html>

Проверьте, посмотрите <

Web Storage Разработка простого списка сайтов

Программа списка сайтов реализует следующие функции:

Можно ввести имя сайта и адрес сайта, чтобы сохранить его с именем сайта в качестве ключа в localStorage;
По имени сайта найти адрес сайта;
Список всех сохраненных сайтов;

Следующий код используется для сохранения и поиска данных:

Методы save() и find()

Пример

//Сохранение данных　　
function save(){}　　
　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　var sitename = document.getElementById("sitename").value;　　
　　　　localStorage.setItem(sitename, siteurl);
　　　　alert("успешно добавлено");
}
//查找数据　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var sitename = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");　　
　　　　find_result.innerHTML = search_site + "的网址是：" + sitename;　　
}

Полный пример демонстрации如下:

Пример

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>Статья о Web Storage в HTML5</title>　　
</head>　　
<body>　　
　　　　<div style="border: 2px dashed #ccc;width:320px;text-align:center;">　　　　　
　　　　　　　　<label for="sitename">Имя сайта(key):</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<label for="siteurl">Сайт(value):</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<input type="button" onclick="save()" value="Добавить запись"/>　　
　　　　　　　　<hr/>　　
　　　　　　　　<label for="search_phone">Ввести имя сайта:</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>　　
　　　　　　　　<input type="button" onclick="find()" value="Найти сайт"/>　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　// Загрузка всех данных, хранящихся в localStorage
　　　　loadAll();　　　　　
　　　　　　　　
　　　　//Сохранение данных　　
　　　　function save(){}　　
　　　　　　　　var siteurl = document.getElementById("siteurl").value;　　
　　　　　　　　var sitename = document.getElementById("sitename").value;　　
　　　　　　　　localStorage.setItem(sitename, siteurl);
　　　　　　　　alert("успешно добавлено");
　　　　}
　　　　//查找数据　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var siteurl = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");　　
　　　　　　　　find_result.innerHTML = search_site + "的网址是：" + siteurl;　　
　　　　}
　　　　//将所有存储在localStorage中的对象提取出来，并展现到界面上
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result += "<tr><td>ключ</td><td>значение</td></tr>";　　
　　　　　　　　　　　　for(var i=0; i<localStorage.length; i++){　　
　　　　　　　　　　　　　　　　var sitename = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var siteurl = localStorage.getItem(sitename);　　
　　　　　　　　　　　　　　　　result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result += "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "данные отсутствуют...";　　
　　　　　　　　}　　
　　　　}　　　　　　
　　　　</script>
</body>　　
</html>

Проверьте, посмотрите <

Скриншот реализованного эффекта:

Данный пример демонстрирует простое хранение и поиск данных в localStorage, в большинстве случаев данные, которые мы храним, будут более сложными.

Далее мы будем использовать JSON.stringify для хранения данных объекта, JSON.stringify может преобразовать объект в строку.

Пример

var site = new Object;
...
var str = JSON.stringify(site);　//　将对象转换为字符串

Затем мы используем метод JSON.parse для преобразования строки в объект JSON:

Пример

var site = JSON.parse(str);

Код реализации на JavaScript:

Методы save() и find()

Пример

//Сохранение данных　　
function save(){}　　
　　　　var site = new Object;
　　　　site.keyname = document.getElementById("keyname").value;
　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　var str = JSON.stringify(site);　//　将对象转换为字符串
　　　　localStorage.setItem(site.keyname, str);　　
　　　　alert("保存成功");
}　　
//查找数据　　
function find(){　　
　　　　var search_site = document.getElementById("search_site").value;　　
　　　　var str = localStorage.getItem(search_site);　　
　　　　var find_result = document.getElementById("find_result");
　　　　var site = JSON.parse(str);　　
　　　　find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;　　
}

Полный пример приведен ниже:

Пример

<!DOCTYPE html>
<html>　　
<head>　　
　　　　<meta charset="utf-8">　　
　　　　<title>Статья о Web Storage в HTML5</title>　　
</head>　　
<body>　　
　　　　<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
　　　　　　　　<label for="keyname">别名(key):</label>　　
　　　　　　　　<input type="text" id="keyname" name="keyname" class="text"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<label for="sitename">Название сайта:</label>　　
　　　　　　　　<input type="text" id="sitename" name="sitename" class="text"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<label for="siteurl">Адрес сайта:</label>　　
　　　　　　　　<input type="text" id="siteurl" name="siteurl"/>　　
　　　　　　　　<br/>　　
　　　　　　　　<input type="button" onclick="save()" value="Добавить запись"/>　　
　　　　　　　　<hr/>　　
　　　　　　　　<label for="search_phone">Ввести别名(key):</label>　　
　　　　　　　　<input type="text" id="search_site" name="search_site"/>　　
　　　　　　　　<input type="button" onclick="find()" value="Найти сайт"/>　　
　　　　　　　　<p id="find_result"><br/></p>　　
　　　　</div>　　
　　　　<br/>　　
　　　　<div id="list">　　
　　　　</div>　　
　　　　<script>
　　　　//Сохранение данных　　
　　　　function save(){}　　
　　　　　　　　var site = new Object;
　　　　　　　　site.keyname = document.getElementById("keyname").value;
　　　　　　　　site.sitename = document.getElementById("sitename").value;　　
　　　　　　　　site.siteurl = document.getElementById("siteurl").value;
　　　　　　　　var str = JSON.stringify(site);　//　将对象转换为字符串
　　　　　　　　localStorage.setItem(site.keyname, str);　　
　　　　　　　　alert("保存成功");
　　　　}　　
　　　　//查找数据　　
　　　　function find(){　　
　　　　　　　　var search_site = document.getElementById("search_site").value;　　
　　　　　　　　var str = localStorage.getItem(search_site);　　
　　　　　　　　var find_result = document.getElementById("find_result");
　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;　　
　　　　}　　
　　　　
　　　　//将所有存储在localStorage中的对象提取出来，并展现到界面上
　　　　//　确保存储的　keyname　对应的值为转换对象，否则JSON.parse会报错
　　　　function loadAll(){　　
　　　　　　　　var list = document.getElementById("list");　　
　　　　　　　　if(localStorage.length>0){　　
　　　　　　　　　　　　var result = "<table border='1'>";　　
　　　　　　　　　　　　result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";　　
　　　　　　　　　　　　for(var i=0; i<localStorage.length; i++){　
　　　　　　　　　　　　　　　　var keyname = localStorage.key(i);　　
　　　　　　　　　　　　　　　　var str = localStorage.getItem(keyname);　　
　　　　　　　　　　　　　　　　var site = JSON.parse(str);　　
　　　　　　　　　　　　　　　　result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";　　
　　　　　　　　　　　　}　　
　　　　　　　　　　　　result += "</table>";　　
　　　　　　　　　　　　list.innerHTML = result;　　
　　　　　　　　}　　
　　　　　　　　　　　　list.innerHTML = "Данные отсутствуют...";　　
　　　　　　　　}　　
　　　　}　　
　　　　</script>
</body>　　
</html>

Проверьте, посмотрите <

В примере loadAll выводит все хранящиеся данные. Убедитесь, что данные, хранящиеся в localStorage, являются форматом JSON, в противном случае JSON.parse(str) вернет ошибку.

Пример вывода результатов:

Локальная база данных HTML5 Семантические элементы HTML5