Как сохранить номер в локальном хранилище даже при перезагрузке страницы

ProgramBox

Как сохранить номер в локальном хранилище даже при перезагрузке страницы

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#javascript

Вопрос:

Привет, я хочу сохранить число, когда его значение равно 0

 var count = 3; 
var count2 = "0"; 
var count3; 
var btn = document.getElementById("btn"); 



btn.onclick = function() {

count--; 
btn.style.transform = "scale(2)";
setTimeout(function() {
btn.style.transform = "scale(1)";
}, 0005); 

if(count === 0) {

  /* I want to store the result here in manner that even when  the page  reload the number remains the same ( 0 in that case ) */ 
  
  var zero = localStorage.getItem(count); 
  count3 = parseInt(count2); 
 localStorage.setItem( count , count3 ); 
 
 

}


}

 #btn {

width : 300px;
height : 300px;
border : solid 2px red;
border-radius : 50%; 
transition : .1s;
}

 <button id="btn">Click me</button>

Но мне не нужно влиять на счет3, чтобы считать, так как счетчик уже установлен на 0 🙁 но я не могу влиять на числа ? Я думаю, что в «ключе» есть только строка для локального хранилища.

Как я могу это сделать ?

1. Я не уверен, чего вы пытаетесь достичь, я думаю, вам следует прояснить этот вопрос. Однако, если проблема в том , что вы хотите назначить number count «кому», но получаете string «от localStorage.getItem(count) «, вы можете использовать parseInt это: var zero =parseInt(localStorage.getItem(count))

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

3. Вы уверены, что нет метода, который переопределяет это значение из localstorage после обновления? Лучший способ выяснить это-открыть DevTools в своем веб-браузере, откройте вкладку «Приложение», затем «хранилище» — > «локальное хранилище» и обновите страницу, чтобы узнать, изменится ли она после обновления. Если «да», то у вас есть метод, который заменит его после обновления.

4. Значение «количество» установлено на 0 в приведенном ниже примере, но когда я перезагружаю и нажимаю на элемент, значение 3 принимает значение 0, и тогда я все еще могу нажать на кнопку

Ответ №1:

Ключом к локальному хранилищу является использование только строки. Вы можете определить функцию для анализа любого ключа…. При перезагрузке страницы loacalStorage не может быть очищен. Таким образом, вы можете сделать это, как var key = parse(localStorage.getitem(count)) в вашей определенной функции.

Ответ №2:

localStorage.setItem( количество , число 3 )

Это неправильно. Тебе следует написать

localStorage.setItem( «где» , значение );

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

Когда вы затем перезагружаете страницу, целое count число затем пытается извлечь сохраненную информацию в ключе 3 .

Кроме того, count === 0 можно было бы написать так count == 0 , чтобы он не проверял, является ли count первым целым числом, а вместо этого принимал строки (и логические, неопределенные и нулевые).

ИЗМЕНИТЬ: добавлен фрагмент в качестве примера. Я переработал код, чтобы он был более читаемым, прокомментировал localStorage, чтобы вы могли запустить фрагмент при переполнении стека, и я предположил, что количество не может быть ниже 0.

В качестве бонуса я удалил count2 и count3 изменил время ожидания с 0,005 (5 мс-это минимум в любом случае) до 50 мс (половина 0,1 с, которая находится в переходе).

 var storedCount = getStoredCount();
const GOT_PREVIOUS_VALUE = storedCount != null;
var count = (GOT_PREVIOUS_VALUE) ? storedCount : 3;
var btn = document.getElementById("btn");

btn.onclick = changeCount;

function changeCount() {
  if (count > 0) {
    count--;
    scaleButton();
    storeCount();

    console.log({count})
  }
}

function scaleButton() {
  btn.style.transform = "scale(2)";
  setTimeout(function() {
    btn.style.transform = "scale(1)";
  }, 50);
}

function getStoredCount() {
  return localStorage.getItem('count') ;
}

function storeCount() {
  localStorage.setItem('count', count);
}

 #btn {
  width: 300px;
  height: 300px;
  border: solid 2px red;
  border-radius: 50%;
  transition: .1s;
}

 <button id="btn">Click me</button>

1. хорошо, я попробую и скажу, работает ли это

2. Это все еще не работает idk , что в этом плохого , я перепробовал все, я просто заменил счетчик на «счетчик», я даже заменил === на == Я не знаю, как это сделать. Могу ли я получить пример с фрагментом или чем-то еще ?

3. Я отредактировал сообщение с примером. Надеюсь, это прояснит для вас ситуацию.

4. Большое спасибо за помощь, я действительно пытался это сделать, но когда я перезагружаю страницу, я все еще могу нажать на кнопку. Если «количество» равно 0, я хочу сохранить его таким образом, чтобы я больше не мог нажимать на кнопку

5. В предыдущем сообщении я уже раскомментировал код, но по какой-то причине я просто перезапускаю Mamp и VS-код, и это работает. В любом случае, большое спасибо 🙂

Метки: Как сохранить номер в локальном хранилище даже при перезагрузке страницы