Question

我已经做了一个日程安排者，意识到我从来没有设置输入保存到本地存储中。我对保存到本地存储不是很熟悉，并且坦率地说，我不知道从哪里开始，而且我在网上看到的示例与我的代码格式完全不同，因此很难遵循。有提示吗？

$(function(){
    $(document).on('click','.edit_btn' , function(){
        let editable = $(this).prev('.edit_cont').attr('contenteditable');
        if(editable){
            $(this).text('edit');
            $(this).prev('.edit_cont').removeAttr('contenteditable');
            $(this).prev('.edit_cont').removeClass('edit_cont_border');
         }
          else{
            $(this).text('save');
            $(this).prev('.edit_cont').attr('contenteditable','true');
            $(this).prev('.edit_cont').addClass('edit_cont_border');
        }
    })
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "container" spellcheck="false">
    <div class = "row my-row">
        <div class = "col my-col col-a1 colorcode" id = "9"> 9am </div>
        <div class = "col my-col col-a2 edit_cont" > </div>
        <div class = "col my-col col-a3 edit_btn"> edit </div>
    </div>
    <div class = "row my-row" >
        <div class = "col my-col col-b1 colorcode" id = "10"> 10am </div>
        <div class = "col my-col col-b2 edit_cont">  </div>
        <div class = "col my-col col-b3 edit_btn"> edit </div>
    </div> (+6 more rows)

Answer 1

使用localStorage非常简单。您所要做的就是，例如：

localStorage.setItem('your_data_key', yourData);

您可以选择是将单个输入的数据存储在本地存储项还是整个表单中。

如果要使用单个项目存储整个表单的数据，一种方法是将表单的数据转换为JSON。由于您使用的是jQuery，请在以下位置查看答案：Convert form data to JavaScript object with jQuery在香草JS中也有一个answer。

Object.fromEntries(new FormData(form))

您可以使用事件侦听器的组合在localstorage之间进行数据保存和加载。

在jQuery中，一种方法如下所示。

$(function() {
    // storedData = localStorage.getItem('your_data_key');
    // Load the stored Data to the form based on the way you have saved it
});

function storeData(e) {
    // yourData = ...; // Collect the data how you want
    // localStorage.setItem('your_data_key', yourData);
}

$("form").on('submit', storeData);
$("form :input").on('change', storeData);

_{以上内容不完整，未经测试，仅供参考。}

如何将用户输入保存到本地存储？

1 个答案: