Звездный рейтинг и получение данных из локального хранилища

Question

Это часть большего приложения. В этой части я пытаюсь оценить, используя звезды, и я храню данные о скорости локально и получаю данные о перезагрузке. Мне не хватает той части, когда я перезагружаю страницу, что я получаю оценку с предыдущего сеанса, т.е. чтобы получить 5/10 звезд черных.

<div class='rating'>
<span class='star' id="1" onclick="saveStar(this.id)"></span>
<span class='star' id="2" onclick="saveStar(this.id)"></span>
<span class='star' id="3" onclick="saveStar(this.id)"></span>
<span class='star' id="4" onclick="saveStar(this.id)"></span>
<span class='star' id="5" onclick="saveStar(this.id)"></span>
<span class='star' id="6" onclick="saveStar(this.id)"></span>
<span class='star' id="7" onclick="saveStar(this.id)"></span>
<span class='star' id="8" onclick="saveStar(this.id)"></span>
<span class='star' id="9" onclick="saveStar(this.id)"></span>
<span class='star' id="10" onclick="saveStar(this.id)"></span>
</div>


let s = JSON.parse(localStorage.s || null) || {};
const saveStar = (id) => {
s.id = id;
console.log(s.id);   
}
function loadData() {
return s.id || "default";
}
console.log(loadData());

.rating { font-size: 0; }
.rating span { font-size: 40px; }
.rating span::before { content: "☆"; }
.rating span.active::before {content: "★"; }
.rating span:hover { cursor: pointer; }

Answer 1

Вы изменяете значение переменной (s в вашем примере), но никогда не сохраняете его обратно в localStorage. Один из способов был бы:

let s = JSON.parse(localStorage.s || null) || {}
const saveStar = id => {
  s.id = id
  console.log(s.id)
  localStorage.setItem('s', JSON.stringify(s)) // <====
}
function loadData() {
  return s.id || 'default'
}
console.log(loadData())

Полный текст API о том, как использовать localStorage, можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Answer 2

Попытка получить доступ к localStorage с помощью приведенного ниже примера кода StackOverflow приведет к небезопасной операции. Я позволил себе создать пример, в котором по умолчанию будет использоваться пара ключей obj в случае, когда LS недоступен, поэтому вы можете увидеть его в действии.

Вы можете использовать localStorage путем установки и получения пар ключ / значение для этого простого примера. Если вы планируете сохранять большие наборы данных с массивами и т. Д. c, тогда для чтения и сохранения с помощью LS будет целесообразно использовать JSON.stringify и JSON.parse.

Дополнительная информация о том, как установить / получить ключ Пары значений с использованием LS можно найти здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Этот пример может быть дополнительно удален, чтобы также проверить, нажимает ли первая звезда, когда она уже выбрана, чтобы получить 0 звезд будучи оранжевым, et c. Кроме того, возможно, будет использована более современная структура ES6.

var exampleWithoutLS = false;
var testWithOutLS = {};

function saveStar(id) {

  if (!exampleWithoutLS) {
    localStorage.setItem('rating', id);
  } else {
    testWithOutLS.rating = id;
  }

  // Refresh our rating on screen
  loadData();
}

function loadData() {

  // Get stored rating on load
  var rating;
  if (!exampleWithoutLS) {
    rating = localStorage.getItem('rating');
  } else {
    rating = testWithOutLS.rating;
  }

  if (!rating) {
    return;
  }

  var s = parseInt(rating);
  // Get all of our stars..
  var stars = document.getElementsByClassName("star");
  // Loop through, and based on rating int, apply style
  for (var i = 0; i < stars.length; i++) {
    if (i >= s) {
      stars[i].classList.remove("active");
    } else {
      stars[i].classList.add("active");
    }
  }
  // return s;
}

try {

  // Check we can access localstorage
  if (!window.localStorage) {
    console.log('Unable to access LS');
  }

} catch (e) {
  // Can't access LS
  exampleWithoutLS = true;
} finally {
  loadData();
}

.rating {
  font-size: 0;
}

.rating span {
  font-size: 40px;
}

.rating span::before {
  content: "☆";
  color: black;
}

.rating span.active::before {
  content: "★";
  color: orange;
}

.rating span:hover {
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Star Rating</title>
</head>

<body>
  <div class='rating'>
    <span class='star' id="1" onclick="saveStar(this.id)"></span>
    <span class='star' id="2" onclick="saveStar(this.id)"></span>
    <span class='star' id="3" onclick="saveStar(this.id)"></span>
    <span class='star' id="4" onclick="saveStar(this.id)"></span>
    <span class='star' id="5" onclick="saveStar(this.id)"></span>
    <span class='star' id="6" onclick="saveStar(this.id)"></span>
    <span class='star' id="7" onclick="saveStar(this.id)"></span>
    <span class='star' id="8" onclick="saveStar(this.id)"></span>
    <span class='star' id="9" onclick="saveStar(this.id)"></span>
    <span class='star' id="10" onclick="saveStar(this.id)"></span>
  </div>
</body>

</html>

Answer 3

Вы можете использовать localStorage APÏ setItem и getItem для сохранения и извлечения заметки.

Из do c (https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage):

// Save data to the current local store
localStorage.setItem("username", "John");

// Access some stored data
alert("username = " + localStorage.getItem("username"));