Блог

(ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: я новичок в программировании, поэтому мой код, вероятно, не является оптимальным. Если вы знаете лучший способ сделать это, не стесняйтесь оставлять его в комментариях)

Большую часть времени я понятия не имел, что я делаю, но с терпением и с вашей помощью, ребята, я придумал это:

 if (window.localStorage) {

// Create the Key/Value 
var cNum = localStorage.getItem("currentNumber");

if (localStorage.currentNumber == undefined) {
  localStorage.setItem("currentNumber","0");}
    
// Variables
resetCount.innerHTML = localStorage.currentNumber;

// Functions
function btnR() {
    cNum  ;
    localStorage.currentNumber = cNum;
    resetCount.innerHTML = cNum;}}
  

else { console.log(«Нет»); }

HTML:

 <button id="resetButton" onclick="btnR()">Reset</button>
        <p id="resetCount">0</p>
  

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

Примечание: мне пришлось указать причину .SetItem в операторе if, даже если значение было в хранилище, оно возвращало значение к нулю каждый раз, когда я обновлял страницу. Я нашел способ остановить это.

Вам нужно либо настроить серверную часть для отправки данных и сохранения информации, которую вы хотите сохранить, либо сохранить данные в localStorage.

Просто знайте, что не рекомендуется сохранять конфиденциальную информацию в localStorage (поскольку они могут быть скомпрометированы в результате межсайтовых скриптовых атак).

localStorage.setItem помещает немного данных в localStorage (и остается там, пока вы его не очистите), а localStorage.getData извлекает его.

Это может помочь вам начать работу с localStorage, но вам нужно будет выяснить функцию, чтобы задать цвет для имеющегося у вас элемента.

 let boxColour = localStorage.getItem("boxColour");

if (boxColour === null) {
  setBoxColour("colour");
} else {
  setBoxColour(boxColour);
}

function setBoxColour(colour){ localStorage.setItem("colour");}
  

/ * Внутри функции вы должны получить элемент и изменить его атрибут стиля или добавить класс для добавления стилей */

Осторожно с этими данными локального хранилища!

Вы могли бы использовать LocalStorage . Он сохраняет данные на странице, которые будут использоваться после того, как страница будет обновлена или закрыта и открыта позже.

Вот пример:

(К сожалению, похоже, что это не работает на сайте stackoverflow, но если вы попробуете свой HTML-файл, он будет работать)

 var loadFunc = (elem) => {
  console.log("Value saved is: "  localStorage.getItem("savedValue"));
  
  if(localStorage.getItem("savedValue")){ //checks if value is saved or not
    elem.checked = localStorage.getItem("savedValue");
  }
}

var clickFunc = (elem) => {
  localStorage.setItem("savedValue", elem.checked); //set te value if in localStorage 
}  

 Click the checkbox and the value will be saved.
<input type="checkbox" onload="loadFunc(this)" onclick="clickFunc(this)">