Почему массив в localStorage обнуляется при обновлении страницы?

Question

helpmeplease196 @helpmeplease196

JavaScript

Почему массив в localStorage обнуляется при обновлении страницы?

let arr=[]
localStorage.setItem("arr", JSON.stringify(arr))
let priceArrString = localStorage.getItem("arr")
let priceArr=JSON.parse(priceArrString)

Далее в массив добавляются элементы. Но при обновлении страницы, массив снова равен 0.
В чем здесь ошибка ?

Вопрос задан более двух лет назад
970 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 2

3 комментария

helpmeplease196 @helpmeplease196 Автор вопроса

Спасибо, но как правильно сделать проверку?
Приходит в голову только такой вариант, но он не работает

let arr
if (localStorage.getItem('arr')== nul){
localStorage.setItem("arr", JSON.stringify(arr))}
let priceArrString = localStorage.getItem("arr")
priceArr=JSON.parse(priceArrString)

То есть - я проверяю, пустой ли сейчас localst и если да, то записываю в него

Написано более двух лет назад
Алексей @Azperin
helpmeplease196,
let priceArr = JSON.parse( localStorage.getItem("arr") ?? '[]');
Написано более двух лет назад
Алексей @Azperin

helpmeplease196, если он пустой, зачем в него записывать ? ты это сделаешь когда с сервера цены получишь

Написано более двух лет назад

7 комментариев

helpmeplease196 @helpmeplease196 Автор вопроса
Простите, понимаю, что это очень простой вопрос, но уже 3 день туплю.
Есть вот такой простой код.
let p = document.querySelector("p") let btn = document.querySelector("button") let k = 0 if(localStorage.getItem("arr")==null /*если arr ничего не хранит*/ ){ localStorage.setItem("arr", JSON.stringify([])/*добавляем в arr пустой массив*/) } else/* если arr уже хранит массив*/{ //то добаляем в него новые значения let arr = JSON.parse(localStorage.getItem("arr")) btn.addEventListener("click", function(){ k++ arr.push(k) p.innerHTML=`${arr}` }) }

Я понимаю, что каждый раз при обновлнии старницы в localStorage попадает пустой массив. Но не один из вариантов проверок не подошел(вернее я не могу их правильно применить). Не могу понять как прописать условия в зависмости от наличия/отсутствия значений.
Написано более двух лет назад
Noder SS @noder_ss

Как я понял, не работает условие. У меня тоже через нулл не работало, проверяйте через пустую строку = ""

Написано более двух лет назад
Noder SS @noder_ss

Применить? А чего нужно добиться?

Написано более двух лет назад
Noder SS @noder_ss

helpmeplease196, не стоит извинятся, я только за помочь. Все через это проходим

Написано более двух лет назад

helpmeplease196 @helpmeplease196 Автор вопроса

Спасибо в итоге работает так:

<body>
    <p></p>
    <button>+</button>
    <div></div>
</body>

let p = document.querySelector('p');
    let btn = document.querySelector('button');

    let body=document.querySelector("body")
let div = document.querySelector("div")
    if (localStorage.getItem('arr') === null) {
        localStorage.setItem('arr', '[]');
    }
    let arrq = JSON.parse(localStorage.getItem('arr'));
    btn.addEventListener('click', function () {
        let k = localStorage.getItem("k")// До этого К не объявлялась. Почему нет ошибки? Ведь изначальное значение не задано (то же самое что: let k; k++ (будет ошибка))
       k++;
        arrq.push(k);
        p.innerHTML=`${arrq}`
        localStorage.setItem('arr', JSON.stringify(arrq));
        localStorage.setItem('k', JSON.stringify(k));

        let newBtn=document.createElement("button")//каждый раз создаем новую кнопку
        div.appendChild(newBtn) // и вставляем в div
    })

Не подскажите можно ли как-то сохранить элемент HTML (div) в localStorage.
Пыталась сделать по аналогии с переменной "к", сохранить div c созданными кнопками но не работает.
Как я поняла разметку тоже можно сохранять в localStorage, или это неверный подход?

Написано более двух лет назад

Noder SS @noder_ss

Попробуйте обращаться по классу или айди, возможно получится, а так без понятия. Это, наверное, уже отдельный вопрос будет). Если интересны все эти сохранения, то попробуйте изучить беккенд по видео из ютуба. Честно, не сильно знаю локалку, если это сохранение DOM, попробуйте, должно работать

Написано более двух лет назад
helpmeplease196 @helpmeplease196 Автор вопроса

Ростик Кальченко, Спасибо

Написано более двух лет назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 132 просмотра
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 150 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 нояб.
- 135 просмотров
3

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Телеграм бот

22 нояб. 2024, в 02:56

10000 руб./за проект

Перерисовать логотип в векторе

22 нояб. 2024, в 00:55

500 руб./за проект

Разработка алгоритма на python (Data engineering)

21 нояб. 2024, в 23:30

300000 руб./за проект

Answer 1 · 2022-10-15 18:58:15

Дак ты всегда пишеш в локалстор при обновлении
Первое что страница видит это localStorage.setItem("arr", JSON.stringify([]))
ты хоть делай проверку существует ли уже запись в сторе.
Не знаю правда о целесообразности хранения цен в каких-либо кешах, если только они у тебя не меняются месяцами.

Answer 2 · 2022-10-15 20:07:40

Noder SS @noder_ss

Линуксоид-энтузиаст и SQL разработчик

Так вы с каждой перезагрузки сохраняете новую, проверяйте, существует ли она, например, проверка значения

Ответ написан более двух лет назад

7 комментариев

Answer 3 · 2022-10-15 22:42:20

Не надо ничего никуда записывать. Две функции. Одна сохраняет значения, вторая получает.

function setStorageData(key, data) {
  localStorage.setItem(key, JSON.stringify(data));
}

function getStorageData(key, defaultValue = []) {
  return JSON.parse(localStorage.getItem(key)) ?? defaultValue;
}

Вот и всё. Где надо - получаете данные, где надо - сохраняете.

Почему массив в localStorage обнуляется при обновлении страницы?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт