重新加载后本地存储重置

问题描述

我绝对是JS的新手。以下代码根据保存在localStorage中的用户输入创建对象数组。

我想让localStorage在页面重新加载后保留数据。

我搜索并找到了使用的解决方案 localStorage.setItem("initData"+new Date().getTime(),JSON.stringify(movies)) 这确实有效，但是在这种情况下，我不能将所有对象都放在一个数组中。

    <script>
        
        let movies = [];
        const addMovie = (ev)=>{
            ev.preventDefault();  //to stop the form submitting
            let movie = {
                id: Date.now(),title: document.getElementById('title').value,sales: document.getElementById('sales').value
            }
            movies.push(movie);
            document.forms[0].reset(); // to clear the form for the next entries
            //document.querySelector('form').reset();

            //for display purposes only
            console.warn('added',{movies} );
            let pre = document.querySelector('#msg pre');
            pre.textContent = '\n' + JSON.stringify(movies,'\t',2);

            //saving to localStorage
            localStorage.setItem('initData',JSON.stringify(movies) );


            let allsales = movies.map(({ sales }) => sales)
            var allsalesnumbers = allsales.map(Number);
            var sumSales = allsalesnumbers.reduce(function(pv,cv) { return pv + cv; },0);
            console.log("Total of EU Sales " + sumSales );

                       
        }
        document.addEventListener('DOMContentLoaded',()=>{
            document.getElementById('btn').addEventListener('click',addMovie);
        });
    </script>

解决方法

LocalStorage仅存储字符串，需要在存储之前对数组进行字符串化，并在读取之前进行解析。

let movies =  JSON.parse(localStorage.getItem('movies')) || [];

//保存到本地存储：

localStorage.setItem（'movies'，JSON.stringify（movies））;

,

我认为问题在于您没有使用旧的存储数据，而是在每次提交时都将其替换为新数据。尝试像这样初始化电影数组

const oldDataString = localStorage.getItem('initData')
const movies = JSON.parse(oldDataString || "[]") // if there is no items just parses an empty array