Question

这是一个简单的列表。用户可以删除或添加类别。但是我一直在想出如何保存用户在刷新页面时所做的工作。例如，我输入作业并删除Vaje，即使刷新时li元素也将保留，而不是重置整个事情。

HTML


        <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" >
            <li class="class">Vaje</li>
            <li class="class">Treningi</li>
            <li class="class">Projekt</li>
        </ul>
    </div>

JS

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





}

Answer 1

要在本地存储中添加/删除项目，您需要使用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

Answer 2

首先，我们需要更新HTML，以准备好使用存储在浏览器的HTML5网络存储（https://www.w3schools.com/html/html5_webstorage.asp）中的数据在页面加载时进行初始化：

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

接下来，我们需要更新脚本以处理初始化现有Web存储数据-检查是否存在并更新HTML列表显示：

// 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>)'));
}

接下来，我们要更新添加/删除处理以维护current_data数组的状态，并使用该数组的状态更新Web存储：

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

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

2 个答案: