Question

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

我想要的是阻止重新排列数组列表。

希望你了解我。

感谢。

$(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 || '[]');

Answer 2

您需要在电影的页面重新加载时存储localStorage数据。

$(document).ready(function(){
    var data = localStorage.getItem("films");
    var films = data ? JSON.parse(data) : [];

    $('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);

        });

    });

Answer 3

在设置值之前，您需要获取现有值，然后将新值与现有值连接并将其设置为本地存储。

var movies = localStorage.getItem("films");
movies = JSON.parse(movies || '[]');
films.concat(movies);
localStorage.setItem("films", JSON.stringify(films));

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

3 个答案: