Javascript 如何在本地存储中保存用户输入（添加和删除）？

这是一个简单的任务清单。用户可以删除或添加类别。但是我一直很难弄清楚如何保存用户刷新页面时所做的操作。例如，我输入作业并删除Vaje，即使在刷新时li元素也会保留，而不是重置整个内容

HTML

JS

---

要从localstorage中添加/删除项，需要使用getItem'key'和setItem'key'，'values'。如果要删除某些内容，需要使用removeItem“key”函数

let value = 'some cool value';
window.localStorage.setItem('key', value);

console.log(window.localStorage.getItem('key')); // some cool value
window.localStorage.removeItem('key');

console.log(window.localStorage.getItem('key')); // null

---

首先，我们需要更新HTML，以便在页面加载时使用存储在浏览器HTML5 Web存储中的数据进行初始化：

---

这回答了你的问题吗？

$(document).on('click', '.class', function(){ 
  $('.class')
    .css({ "font-weight": 'normal', "text-decoration": 'none'})
    .removeClass("selectedItem");

  $(this)
    .css({"font-weight": 'bold', "text-decoration": 'underline'})
    .addClass("selectedItem");
});

$(function(){
  $("#add").click(function(){
    var addItem = $("#dodaj").val();
    if(addItem.length > 0) {  
      $("ul").append($('<li class="class"></li>)').text(addItem));
      $("#dodaj").val("");
    }
  });

  $("#remove").click(function() {
    $(".selectedItem").remove();
  });
});





}

let value = 'some cool value';
window.localStorage.setItem('key', value);

console.log(window.localStorage.getItem('key')); // some cool value
window.localStorage.removeItem('key');

console.log(window.localStorage.getItem('key')); // null

<div>
    <input type="text" id = "dodaj" name="additem">
    <button id="add" onclick="newElement()">Dodaj</button>
    <button id="remove" class="remove" >Zbriši</button>
    <ul id="kategorija" class="notes" >
        <!-- injected via javascript -->
    </ul>
</div>

// a unique key for this specific area of your application where data will be stored
var unique_key_name = 'user_selection';

// the data from user's previous session fetched on browser init (array of values)
var current_data = window.localStorage.getItem(unique_key_name);
if (!current_data) {
    // set current_data to empty array if none exists (first time initialization, etc)
    current_data = [];
}

// inject array of values into HTML
for (var i = 0; i < existing_data.length; i++) {
    $('ul').append($('<li class="class">' + existing_data[i] + '</li>)'));
}

$('#add').click(function(){
    var addItemVal = $('#dodaj').val();
    if (addItemVal.length > 0) {
        $('ul').append($('<li class="class"></li>)').text(addItemVal));
        $('#dodaj').val('');

        // add item to current_data
        current_data.push(addItem);

        // update browser local storage with the state of current_data
        window.localStorage.setItem(unique_key_name, current_data);
    }
});

$('#remove').click(function() {
    var removeItemText = $('.selectedItem').text();
    $('.selectedItem').remove();

    // remove item from current_data
    current_data = $.grep(current_data, function(value) {
        return value != removeItemText;
    });

    // update browser local storage with the state of current_data
    window.localStorage.setItem(unique_key_name, current_data);
});

$(document).on('click', '.class', function() {
    if ($(this).hasClass('selectedItem') {
        $(this)
        .css({ 'font-weight': 'normal', 'text-decoration': 'none'})
        .removeClass('selectedItem');
    } else {
        $(this)
        .css({'font-weight': 'bold', 'text-decoration': 'underline'})
        .addClass('selectedItem');
    }
});