Хранилище сеанса не сохраняется

#javascript #json #session-storage

#javascript #json #хранилище сеанса

Вопрос:

У меня есть кнопка, которая изменяет цвет фона, и я хочу сохранить цвет в локальном хранилище, чтобы он оставался неизменным при обновлении страницы. Используя console.log(field.value), я вижу, что моя функция добавляет новый цвет в локальное хранилище, однако при обновлении страницы хранилище сеансов кажется пустым, а цвет фона не такой, как до его обновления.

 class DrumKit {
  constructor() {
    this.backgroundColor = document.querySelector('body');
  }

  saveSessionColor() {
    let field = this.backgroundColor;
    sessionStorage.setItem('currentColor', JSON.stringify(this.backgroundColor.style.background));
    let x = JSON.parse(sessionStorage.getItem('currentColor'));
    field.value = x;
  }
}
drumKit.themeBtn.addEventListener('click', () => {
  drumKit.saveSessionColor();
});

1. Можете ли вы также опубликовать свою HTML-часть?

2. Это выглядит синтаксически недопустимым. saveSessionColor похоже, это не метод класса.

3. О, извините, то, как я ввел это здесь, выглядит так, но в моем js-файле это находится внутри класса. Я довольно новичок в js, поэтому я предполагаю, что я делаю довольно очевидную ошибку, которую я просто не могу обнаружить.

4. Пара вещей. У вас есть переменная с именем «backgroundColor», которая является ссылкой на элемент. Вы должны назвать это «bodyEl» или что-то в этом роде. Однако вам это вообще не нужно, потому что элемент body уже имеет специальную постоянную ссылку, вызываемую document.body , всегда. Затем вы создаете field переменную, но не используете ее в следующей строке. Вы используете его позже, но field это просто еще одна ссылка на document.body . У него нет value . Вы можете добавить value , но это ничего не даст. При загрузке страницы необходимо задать стиль фона элемента body.

Ответ №1:

Я создал скрипку, потому что это не сработало в редакторе фрагментов

Это позволяет получить цвет сеанса при сохранении, что позволяет избежать проблем с контекстом

https://jsfiddle.net/9zwef8ht/2/

CSS

 body {
  background-color: #ddd; /* default value */
}

HTML

 <button id="go">Go</button>
<button id="check">Check</button>

JavaScript

 "use strict";
class DrumKit {
  constructor(id) {
    // set up the button ... ?
    this.themeBtn = document.getElementById(id);
    // if the button exists, add a click handler
    if (this.themeBtn !== null) {
      this.themeBtn.addEventListener('click', this.saveSessionColor);
    }
    // clear the current color 
    sessionStorage.removeItem('currentColor');
  }

  saveSessionColor() {
    // get the style
    // thanks to: https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style
    let style = window.getComputedStyle(document.body, null);
    let backgroundColor = style.backgroundColor;
    sessionStorage.setItem('currentColor', backgroundColor);
  }

  setSessionColor() {
    let color = sessionStorage.getItem('currentColor');
    // if currentColor is set
    if (color !== null) {
      document.body.style.backgroundColor = color;
    } else {
      // otherwise ...
      document.body.style.backgroundColor = "pink";
    }
  }
}
let drumKit = new DrumKit("go");

// use a button to check the code, remove before launch
document.getElementById("check").addEventListener('click', drumKit.setSessionColor);

1. Большое спасибо за это, я попытался реализовать это в своем проекте, и в журнале консоли я вижу, что цвет сохраняется в хранилище сеансов, но когда страница обновляется, цвет фона возвращается к значению по умолчанию, а не к тому, которое было до того, как я его обновил. Как я могу это изменить?

2. Возможно, вы захотите использовать localStorage вместо sessionStorage — developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API /… — sessionStorage длится в течение сеанса, localStorage длится до тех пор, пока вы его не очистите