Що таке localstorage
Користувач активно працює зі сторінкою: заповнює поля форми, натискає на кнопки, відкриває прихований блок і т.п. Але при оновленні сторінки результат зникає, HTML-документ повертаючись в початковий стан. Щоб браузер запам'ятовував вибір людини можна скористатися локальним сховищем. localStorage - «ключ / значення» зберігається в браузері, поки користувач не очистить його локальне сховище. Можна кілька днів не заходити на веб-проект і після повернення на сайт побачити раніше заповнену форму.
Розмір localstorage
"A mostly arbitrary limit of five megabytes per origin is suggested. Implementation feedback is welcome and will be used to update this suggestion in the future." [W3.org] Тобто рекомендується надавати одному домену як мінімум 5 мегабайт. Більшість браузерів використовують саме цей ліміт.
Що таке sessionStorage
sessionStorage - «ключ / значення» зберігається в браузері поки відкрита вкладка. Тобто можна вільно переміщатися по сайту, оновлювати сторінку, але не закривати вкладку або вікно браузера.
Як зберегти дію після натискання кнопки в JS
Завдання: якщо елемент клацанням вивели на екран, то не видаляти його протягом тривалого часу.
відкрити Я тут. Коли ви повернетеся через пару днів я знову буду тут.
Завдання: якщо людина прийшла перший раз і жодного разу не змінював значення поля дати, то потрібно показати йому поточну дату, інакше ту, яку він ввів останній раз. Практичне застосування .
Зберігати у чебокса checked при оновленні сторінки
Щоб браузер користувача запам'ятовував яку радіокнопку той вибрав в минулий раз
Зберігати вибране значення select
діана Галієва Величезне спасибі за твої топіки! Завжди допомагають! shpargalkablog.ru рулить. NMitra Дякую за теплі слова :) Анонімний Здрастуйте а як зберігати у чебокса checked при оновленні сторінки якщо кілька чекбоксів з name = "formDoor []". Спасибі NMitra Здрастуйте, доповнила статтю радіокнопку Анонімний Здравствуйте!
Як вивести значення ключа, наприклад в div'e, якщо ввести ключ в input?
LocalStorage: apple (ключ) - fruit (значення)
Наприклад ввожу: apple
Натискаю Enter і в div'е з'являється слово: fruit
NMitra document.getElementById ( "in"). Oninput = function () document.getElementById ( "out"). InnerHTML = localStorage.getItem (this.value);
> Анонім 1) Вводжу в input: apple = fruit
2) Тисну Enter (код клавіші на кшталт 13?)
3) В LocalStorage стане: apple (ключ) - fruit (значення)
Було просто супер! NMitra Два інпут легше зробити
document.getElementById ( "in"). onchange = raz;
document.getElementById ( "in1"). onchange = raz;
function raz () localStorage.setItem (document.getElementById ( "in"). value, document.getElementById ( "in1"). value)
> Анонімний Велике вам спасибі! Відмінний блог = відмінний матеріал! Анонімний В input (id = "in") ввожу: apple = fruit
document.getElementById ( "in"). oninput = function () var result = str.split ( '=');
localStorage.setItem (. все, що до знака "=" покласти в стовпець "key" LocalStorage.)
localStorage.setItem (. все, що після знака "=" покласти в стовпець "value" LocalStorage.)
>
Хочеться щоб був все-таки один input.
У input'e знак "=" буде тільки один раз!
Був би просто щасливий! NMitra document.getElementById ( "in"). Onchange = raz;
function raz () var str = document.getElementById ( "in"). value;
localStorage.setItem (str.split ( '=') [0], str.split ( '=') [1]);
> Анонімний Вау! Чудеса! Величезне дякую! Я щасливий! Це кращий блог, що я бачив! Анонімний LocalStorage (key - value):
Item1 - a
Item2 - b
Item3 - c
.
Головна умова:
! При створенні запису в LocalStorage не повинно бути однакових ключів (весь список ключів в LocalStorage повинен складатися з РІЗНИХ унікальних ключів без дублювання)
процедура:
1) Користувач вводить ім'я ключа в полі введення: Наприклад, Item1
2) Прочитуємо ключ (отримуємо value поля введення, в яке користувач вводив ключ)
3) Очищаємо поле введення
4) Перевіряємо, чи є даний ключ в LocalStorage.
Якщо є, то виводимо його значення в div (в даний прикладі значення ключа Item1 = a)
Якщо немає, то створюємо новий запис з цим ключем (див. Головна умова)
Заготівля html:
NMitra
Анонімний скажіть як зробити щоб при натисканні на кнопці міняти значення змінної в localStorage
допустимо кликнули на кнопці занесли в localStorage
localStorage.setItem ( "minibar", "true");
кликнули знову по кнопці поміняли на false
localStorage.setItem ( "minibar", "false");
і так по колу NMitra function Raz () var h = localStorage.getItem ( 'hide');
if (h! = 'true' || h == null) localStorage.setItem ( 'hide', 'true');
> Else localStorage.setItem ( 'hide', 'false');
>
> Анонімний Здрастуйте, а як відобразити блок при введенні ключа? NMitra Здрастуйте, я не знаю повної завдання тому не можу дати рішення. Ви будете довантажувати вміст з іншої сторінки або у вас блок вже є на сторінці, тільки він спочатку приховано, або щось інше. Анонімний Здравствуйте! NMitra, чи плануєте ви доповнити цю тему збереженням змін до IndexedDB?
Дякуємо. NMitra Здрастуйте, хотілося б. Але на сьогоднішній день прохань з написанням статей більше, ніж я можу здолати. Я поки їх за часом звернення розклала. Боюся, що вам швидше буде самим розібратися :( Але за ідею спасибі! Коли-небудь і до неї дійду.