Сохранение изменений | localstorage и sessionStorage | JavaScript

• Автосохранение заполненных полей на JavaScript
• Сохранять у чебокса checked при обновлении страницы
• Сохранять выбранное значение select
• Как сделать заставку на сайт
• Показать AdSense только вновь прибывшим на сайт, но не постоянным читателям
• Всплывающее окно при входе на сайт
• document.querySelectorAll JavaScript
• Редактор HTML
• Появляющийся при щелчке блок на CSS
• Посещённые ссылки и localStorage

Что такое 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

Задача: если элемент щелчком вывели на экран, то не удалять его в течении длительного времени.

Я тут. Когда вы вернётесь спустя пару дней я снова буду тут.

<style>
#idVhod {
  display: none; /* изначально скрыт */ 
}
</style>

<button onclick="onclickVhod()">открыть</button> <span id="idVhod">скрытый текст</span>

<script>
var idVhod = document.getElementById('idVhod');

function onclickVhod() {
  idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline';
  localStorage.setItem('hide', idVhod.style.display); // сохраняем значение в ключ hide
}

if(localStorage.getItem('hide') == 'inline') { // если значение ключа hide "inline"
  document.getElementById('idVhod').style.display = 'inline';
}
</script>

Автосохранение заполненных полей на JavaScript

Вы никогда не сталкивались с ситуацией, когда заполняешь форму (регистрации или комментариев), нажимаешь кнопку "Отправить", а вам показывается сообщение об ошибке и всё ранее написанное удаляется? Крайне неприятно. Задача: сохранить заполненные поля, пока открыта вкладка. На новой вкладке данные должны пропадать. Базой послужил код с этого сайта.

<textarea id="comment"></textarea>
<input type="text" id="fio">

<script>
var elements = document.querySelectorAll('input, textarea');

function checkValidity() {};

for (i=0; i<elements.length; i++) {
 (function(element) {
   var id = element.getAttribute('id');
   element.value = sessionStorage.getItem(id); // обязательно наличие у элементов id
   element.oninput = function() {
     sessionStorage.setItem(id, element.value);
     checkValidity();
   };
 })(elements[i]);
}
</script>

Задача: если человек пришёл первый раз и ни разу не менял значение поля даты, то нужно показать ему текущую дату, иначе ту, которую он ввёл последний раз. Практическое применение.

или

<input type="date" class="raz" onchange="localStorage.setItem('server', this.value);">
<input type="button" value="очистить localstorage и перезагрузить страницу" onclick="localStorage.clear(); location.reload();" />
или
<input type="button" value="удалить localstorage определённого элемента и перезагрузить страницу" onclick="localStorage.removeItem('server'); location.reload();" />

<script>
var dataRaz = document.querySelector('input[type="date"].raz');

if(localStorage.getItem('server') === null) { // если localStorage.getItem пустой
  dataRaz.value = new Date().toJSON().slice(0,10); // сегодняшняя дата
} else {
  dataRaz.value = localStorage.getItem('server'); // последняя дата, на которую изменил пользователь
}
</script>

Сохранять у чебокса checked при обновлении страницы

Источник

<input type="checkbox" id="stat">

<script>
document.getElementById('stat').onclick = function() {
  if(document.getElementById('stat').checked) {
    localStorage.setItem('stat', "true");
  } else {
    localStorage.setItem('stat', "false");
  }
}
if (localStorage.getItem('stat') == "true") {
  document.getElementById("stat").setAttribute('checked','checked');
}
</script>

Чтобы браузер пользователя запоминал какую радиокнопку тот выбрал в прошлый раз

<input type="radio" checked="checked" name="raz" value="1"/> <input type="radio" name="raz" value="2"/> <input type="radio" name="raz" value="3"/>

<script>
var raz = document.getElementsByName('raz');
for (var i = 0; i < raz.length; i++) {
  raz[i].onclick = function() {
    localStorage.setItem('IRadioRaz', this.value);
  }
}
if(localStorage.getItem('IRadioRaz')) {
  var IRadioRaz = localStorage.getItem('IRadioRaz');
  document.querySelector('input[name="raz"][value="' + IRadioRaz + '"]').setAttribute('checked','checked');
}
</script>

Сохранять выбранное значение select

Источник

1 2 3 4

<select id="fruit">
    <option value="0">1</option>
    <option value="1">2</option>
    <option value="2">3</option>
    <option value="3">4</option>
</select>

<script>
document.getElementById("fruit").onchange = function() {
    localStorage.setItem('fruit', document.getElementById("fruit").value);
}

if (localStorage.getItem('fruit')) {
    document.getElementById("fruit").options[localStorage.getItem('fruit')].selected = true;
}
</script>

sessionstorage один раз javascript