HTML локальное хранилище, лучше , чем cookies .
Что такое HTML Local Storage?
С локального хранения данных, веб-приложения могут хранить данные локально в браузере пользователя.
Перед тем как HTML5, данные приложения должны были быть сохранены в cookies , включены в запрос каждого сервера. Локальное хранение данных является более безопасным, и большие объемы данных могут храниться локально, не влияя на производительность веб-сайта.
В отличие от cookies , предел хранения намного больше (at least 5MB) , (at least 5MB) и информация никогда не передается на сервер.
Локальное хранение составляет за происхождение (per domain and protocol) . Все страницы, из одного источника, может хранить и получать доступ к тем же данным.
Местное и хранение сессии
Веб-хранилище предлагает две различных области локальной памяти для хранения и сеанс при хранении, которые различаются по масштабу и продолжительности жизни.
Данные размещены в локальном запоминающем устройстве составляет за происхождения (сочетание протокола, имени хоста и номер порта, как определено в политике одного источника) (данные доступны для всех сценариев, загруженных из страниц из того же происхождения, которые ранее сохраненных данных) и сохраняется после закрытия браузера.
Секция хранение составляет за происхождения-за окно или язычок и ограничивается время жизни окна. хранения Session предназначено, чтобы отдельные экземпляры одного и те же веб-приложений для работы в разных окнах, не мешая друг с другом, прецедентом, что не очень хорошо поддерживается печеньем.
Поддержка браузеров
Числа в таблице указать первую версию браузера, который полностью поддерживает локальное хранилище.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4,0 | 8,0 | 3,5 | 4,0 | 11,5 |
HTML Local Storage Objects
HTML локальное хранилище обеспечивает два объекта для хранения данных на стороне клиента:
- window.localStorage - хранит данные без даты истечения срока
- window.sessionStorage - хранит данные для одной сессии (данные теряются , когда ушко браузера закрыто)
Перед использованием локального хранилища, проверить поддержку браузера для localStorage и sessionStorage :
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
LocalStorage объекта
Объект LocalStorage хранит данные без даты истечения срока действия. Данные не будут удалены при закрытии браузера, и будут доступны на следующий день, неделю или год.
пример
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Попробуй сам " Объяснение примера:
- Создание localStorage имя / значение пары с name="lastname" и value="Smith"
- Получить значение "lastname" и вставить его в элемент с «результатом» ID =
Приведенный выше пример также может быть записана следующим образом:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Синтаксис для удаления "lastname" пункт LocalStorage выглядит следующим образом :
localStorage.removeItem("lastname");
Примечание: пары имя / значение всегда хранятся в виде строк. Помните, чтобы преобразовать их в другой формат, когда это необходимо!
Следующий пример подсчитывает количество раз, когда пользователь нажал кнопку. В этом коде строка значение преобразуется в число, чтобы иметь возможность увеличить счетчик:
пример
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s)."; Попробуй сам " sessionStorage объекта
sessionStorage объект равен localStorage объекта, за исключением того, что он хранит данные только для одной сессии. Данные удаляются, когда пользователь закрывает вкладку конкретного браузера.
Следующий пример подсчитывает, сколько раз пользователь нажал на кнопку, в текущем сеансе:
пример
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session."; Попробуй сам "