Question

如何将输入文本推入数组。然后将其保存在localStorage中。我不知道如何将输入的html代码定义为变量，因此我可以将一串文本传递给我的数组索引。

到目前为止，我已将我的editID定义为blogID，这意味着它是数组索引的对应物，但是在按下edit时，我只会得到null，null，null。我认为我在正确的轨道上就是如何将其转换为文本，因为我似乎无法弄清楚如何定义输入

       blogEntries=localStorage.getItem("BlogContent");
 blogEntries=JSON.parse(blogEntries);
 console.log(blogEntries);

$(document).ready(function(){

var createBlog =    
            //'<div class="blogContainer">'+
                '<div class="blogTitle">'+
            '<h1>CREATE BLOG</h1>'+

                '<input type="placeholder" class="titleInput">'+    
            '</div><br>'+
            '<div class="blogContent">'+
                '<input type="placeholder" class="contentInput">'+  
            '</div><br>'+
            '<div class="blogDate">'+
                '<input type="placeholder" class="dateInput">'+
            '</div>'+
                '<div class="blogControl">'+
                '<input type="button" class="create" value="Create">'+
                //'</div>'+
            '</div>'

                $(".createContainer").append(createBlog);

    for (var i = 0; i < blogEntries.length; i++) {

        var title=blogEntries[i][0];
        var content=blogEntries[i][1];
        var date=blogEntries[i][2];
        var blogID=i;

        var blogEdit = '<div class="blogContainer" blogID="'+blogID+'">'+
            '<div class="blogTitle"><input type="text" value="'+title+'"class="titelInput"></div>'+
            '<div class="blogContent"><input type="text" value="'+content+'"class="contentInput"></div>'+
            '<div class="blogDate"><input type="text" value="'+date+'"class="dateInput"></div>'+
            '<input type="button" value="edit" class="edit">'+
            '<input type="button" value="delete" class="delete">'+
        '</div>'+'<br><br><br>'



        $("#mainContainer").append(blogEdit);
    }


    $(".create").click(function(){
        var titleCont=$(".titleInput").val();
        var contBlog=$(".contentInput").val();
        var dateCont=$(".dateInput").val();

        createBlogPost(titleCont, contBlog, dateCont);
    });

    function createBlogPost(title, content, date){

        var newBlogPost=[title, content, date];

        blogEntries.push(newBlogPost);

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
    };



   $(".delete").click(function(){

        var deleteId=$(this).closest(".blogContainer").attr("blogID");
        console.log(deleteId);

        if(deleteId==0){
            blogEntries[0]=[null];

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
        }
        if(deleteId==1){
            blogEntries[1]=[null];

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
        }
        if(deleteId==2){
            blogEntries[2]=[null];

        var blogEntriesJSON = JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntriesJSON);
        }
   });


  $(".edit").click(function(){
    var editId=$(this).closest(".blogContainer").attr("blogID");
    var titleCont=$(".titleInput").val();
    var contBlog=$(".contentInput").val();
    var dateCont=$(".dateInput").val();

    // First read from local storage. Take empty array as default value
    var blogEntries = JSON.parse(localStorage.getItem("BlogContent"));// || "[]");
    // Use editId directly as index. Don't use .value, because .val() above already gives the value.
    blogEntries[editId] = [titleCont, contBlog, dateCont];
    // Write back to local storage


    localStorage.setItem("BlogContent", JSON.stringify(blogEntries));
});


   });

这是博客的图片，我通过单击三个编辑按钮之一来标识索引，该按钮返回0-2 blogId的值，具体取决于我单击哪个帖子。

    var blogEntries = localStorage.getItem("BlogContent", blogEntries);
blogEntries=JSON.parse(blogEntries);



$(document).ready(function(){

    var blogEntries=[ 
                     ["Title","Content","Date"],
                     ["Title","Content","Date"],
                     ["Title","Content","Date"]
    ];



blogEntries=JSON.stringify(blogEntries);
        localStorage.setItem("BlogContent", blogEntries);


        for (var i = 0; i < blogEntries.length; i++) {
            var title=blogEntries[i][0];
            var content=blogEntries[i][1];

        var date=blogEntries[i][2];
            var blogID=i;

            var blogPost = 
            '<div class="blogContainer" blogID="0">'+
                '<div class="blogTitle">'+title+'</div>'+
                '<div class="blogContent">'+content+'</div>'+
                '<div class="blogDate">'+date+'</div>'+
            '</div>'+'<br><br><br>'



            //var blogPost = '<div class="blogContainer" blogID="'+blogID+'">'+mitVarIndhold+'</div>';


            //$(".blogContainer").append(title, content, date);
            $("#mainContainer").append(blogPost);

        }

edit包含了我所有的两个js文档，保存后我对数组和本地存储的注释超过了，因此它不会产生大量的帖子。

Answer 1

您每次都需要从本地存储读取当前值（或在页面加载时将其读取到 global 变量中。）

第二，您可以使用editId来访问所需的索引，而不必为每种情况单独使用if：

$(".edit").click(function(){
    var container = $(this).closest(".blogContainer");
    var editId= container.attr("blogID");
    // Only get the values WITHIN the container:
    var titleCont=$(".titleInput", container).val();
    var contBlog=$(".contentInput", container).val();
    var dateCont=$(".dateInput", container).val();

    // First read from local storage. Take empty array as default value
    var blogContent = JSON.parse(localStorage.getItem("BlogContent") || "[]");
    // Use editId directly as index. Don't use .value, because .val() above already gives the value.
    blogContent[editId] = [titleCont, contBlog, dateCont];
    // Write back to local storage
    localStorage.setItem("BlogContent", JSON.stringify(blogContent));
});

编写 HTML时，您将执行类似的操作：

// Read from local storage the complete array
var blogContent = JSON.parse(localStorage.getItem("BlogContent") || "[]");
// You have three sections, 0, 1 and 2:
for (var blogId = 0; blogId < 3; blogId++) {
    // Read corresponding blog entry. Default are three empty strings.
    var entry = blogContent[blogId] || ["", "", ""];
    // Build your HTML as you did:
    var blogEdit = '<div class="blogContainer" blogID="'+blogID+'">'+
        '<div class="blogTitle"><input type="text" value="'+entry[0]+'"class="titelInput"></div>'+
        '<div class="blogContent"><input type="text" value="'+entry[1]+'"class="contentInput"></div>'+
        '<div class="blogDate"><input type="text" value="'+entry[2]+'"class="dateInput"></div>'+
        '<input type="button" value="edit" class="edit">'+
        '<input type="button" value="delete" class="delete">'+
    '</div>'+'<br><br><br>';
    // you have code to output the above ...
    // ....
}

如何将输入文本输入数组

1 个答案: