重新加载后本地存储重置答案

【问题标题】：local storage resets after reload重新加载后本地存储重置
【发布时间】：2020-08-12 04:32:46
【问题描述】：

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

【问题讨论】：

let movies = []; 因为你什么都不做。你总是从一个新数组开始，它不知道它应该使用本地存储中的东西。

标签： javascript arrays object local-storage reload

【解决方案1】：

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

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

//保存到本地存储：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

这个也可以作为 Anya Schechter 的答案。谢谢！