Локальна пам’ять браузера

Локальна пам’ять браузера дозволяє зберігати дані на комп'ютері користувача, доступними для веб-сторінок, які запускаються в тому ж домені, навіть після закриття веб-сторінки або перезапуску браузера.

Для доступу до local storage в JavaScript використовується об'єкт window.localStorage. 

Можна зберегти дані в local storage, використовуючи його властивість setItem, а для отримання даних використовується метод getItem.

Також можна видаляти дані з local storage за допомогою методу removeItem та видаляти всі дані за допомогою методу clear.

Локальна пам'ять схожа на використання кукі, але має відмінності.

Кукі мають обмежений розмір даних, зазвичай до 4 KB, в той час як local storage має більш великий розмір, зазвичай до 5 MB.

Кукі мають встановлений термін дії, після якого вони автоматично видаляються. В local storage дані зберігаються до тих пір, поки вони не видалені вручну або поки користувач не очистить свої дані в браузері.

Кукі відправляються на сервер при кожному HTTP-запиті, що дозволяє відслідковувати сесії користувача. Local storage ж не відправляється на сервер, він доступний тільки для JavaScript на клієнті.

Приклад проєкту з локальною пам'яттю: https://oksanapas.github.io/flashcards/ 

Принцип роботи

простір для вмісту нової картки

<input type=text id="country">

<input type=text id="capital">

кнопка додавання картки

<button onclick="add()">Додати</button>

полиця карток

<div class="shelf"> </div>

JS

беремо вміст текстових полів і заносимо в картку, і в localStorage

function add(){

var country=document.getElementById("country").value;

var capital=document.getElementById("capital").value;

  show_card(country,capital);

  localStorage.setItem(country, capital);

}

показуємо картку з вмістом country, capital

function show_card(country,capital) {

var flashcard = document.createElement("div");

  var question = document.createElement('h2');

  var answer = document.createElement('h5');

  question.innerHTML = country;

  answer.innerHTML = capital;

  flashcard.appendChild(question);

  flashcard.appendChild(answer);

  document.getElementById("shelf").appendChild(flashcard);

}

показуємо картки з вмістом country, capital з localStorage

на початку роботи

var content = {}

for (var i = 0; i < localStorage.length; i++) {

  var country = localStorage.key(i);

  var capital = localStorage.getItem(localStorage.key(i))

  content[country] = capital;

  show_card (country, capital)

}

кнопка видалення (HTML + JS)

<button onclick="delete_all()">Видалити все</button>

function delete_all() {

  localStorage.clear();

  document.getElementById("shelf").innerHTML = ""

}

CSS

Бажано надати межі карткам (для цього потрібно задати їм клас в JS), розміри, відступи

flashcard.className = 'card'; //в show_card

Для полиці карток задати  display: flex; та flex-wrap: wrap;

https://css.in.ua/css/property/display 

https://css.in.ua/css/property/flex-wrap