javascript - localStorage 中的数组数据，页面重新加载后重置

Question

我正在处理需要将对象数据保存到本地存储的页面，它工作正常，但是当我刷新页面并再次添加时，所有数据都被删除。

我想要的是防止数组列表重置。

希望你能理解我。

谢谢。

CODEPEN

$(document).ready(function(){

		var films = [];
		
		$('button').click(function(){
      
     var film = {
              'id': 4,
              'title':'John Wick',
              'Genre':'Action'
             };
			films.push(film);
			localStorage.setItem("films", JSON.stringify(films));

			var movies = localStorage.getItem("films");
			movies     = JSON.parse(movies);

			console.log(movies);

		});

	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>

Answer 1

您需要解析现有的 localStorage.films(如果存在)，并将其放入开头的 films 变量中。

const films = JSON.parse(localStorage.films || '[]');