重新加载后本地存储重置

Question

我绝对是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>

Answer 1

LocalStorage只存储字符串，存储前需要对数组进行字符串化，读取前需要解析

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

//保存到localStorage:

localStorage.setItem('movies', JSON.stringify(电影));

Answer 2

我认为问题在于您没有使用旧的存储数据，只是在每次提交时用新数据覆盖它。尝试像这样初始化电影数组

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

重新加载后本地存储重置

local storage resets after reload

javascript

arrays

object

reload

local-storage