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

debugcn 发表于 Dev

艾亚·西迪格（Aiya Siddig）

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

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

斯塔克斯

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

localStorage.setItem('your_data_key', yourData);

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

如果要使用单个项目存储整个表单的数据，则一种方法是将表单的数据转换为JSON。由于您使用的是jQuery，请查看以下内容的答案：使用jQuery将表单数据转换为JavaScript对象它也具有在普通JS中执行此操作的答案。

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。