重新加载页面时，以前的评论消失了-与本地存储有关

Question

Trying to make it so that when I refresh the page the previous comments remain on the page. 尝试使之刷新页面时，以前的注释会保留在页面上。 Not quite sure how to do it. 不太清楚该怎么做。 Also was wondering how you would go about making it so that when you click on the namebox you don't have to highlight "name" and then write your name, you can just click and what you write simply replaces the "name". 也想知道如何制作它，这样当您单击名称框时，不必突出显示“名称”，然后写下您的名称，您只需单击即可，您编写的内容将简单地替换为“名称”。

//Functions for Homepage
function imgUpdate() {
    var img = document.getElementById("navImg").alt;
        if (img === "Cat Selfie") {
            document.getElementById("navImg").src = "foo.jpg";
            document.getElementById("navImg").alt = "foo"
        }
        else {
        document.getElementById("navImg").src = "cat-selfie.jpg";
        document.getElementById("navImg").alt = "Cat Selfie"
        }
}

//Functions for Comments
function clearComment(){
    $('#txt1').val(''); //short for getElement when using j query
};

function clearName(){
    $('#namebox').val('');
};

function saveComment() {
    var ctext = $('#txt1').val();
    var cname = $('#namebox').val();
    if (cname === 'Name') {cname = 'Anon';}
    alert('saveComment cname=' + cname + ' ctext=' +ctext);
    var d = Date();
    var prevComments = $('#cmtlist').html();
    var curComment='<p><span class="cmtname">'+cname+ ':' + '</span>'
        +ctext +d+' </p>'; //span = add things to something  inline
    curComment += prevComments;
        $('#cmtlist').empty();
        $('#cmtlist').append(curComment);
    clearComment();
    clearName();

    setObject('totCmts', curComment);
}



function fetchComments(){
    var inlist=getObject('totCmts');
        if(inlist === null){
            inlist='';
        }
    //display the comments
        $('#cmtlist').empty();
        $('#cmtlist').append(inlist);
}

My Html file 我的HTML文件

<html>
<head>
<meta charset="utf-8" />
<title>Dubya comments</title>
<link rel="stylesheet" href="homepage.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="homepage.js"></script>
</head>
<body>
<header id="banner">
</header>
<nav>
<button type="button" onclick="clearComment()">Clear
comment</button> 
<button type="button" onclick="saveComment()">Save comment</button>
</nav>
<div id="main">
<div id="dtext">
<h4>Your comment</h4>
<input id="namebox" type="text" maxlength="32" size="20"
value="Name" />
<br />
<textarea id="txt1" class="textbox" rows="6"></textarea>
</div>
<h4>Comments</h4>
<div id="cmtlist"></div>
</div>
</body>

</html>

Answer 1

Jack, you can easily store data in localStorage using global object like this: 杰克，您可以使用全局对象轻松将数据存储在localStorage中，如下所示：

// your array with comments
var comments = ["First comment", "Second comment"];

// saving your comments in JSON format
window.localStorage.setItem("comments", JSON.stringify(comments));

// retrieving them
comments = JSON.parse(window.localStorage.getItem("comments"));

You can read more about localStorage on MDN 您可以在MDN上阅读有关localStorage的更多信息

重新加载页面时，以前的评论消失了-与本地存储有关

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-11-15 13:54:23

重新加载页面时，以前的评论消失了-与本地存储有关

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-11-15 13:54:23

解决方案1
2 已采纳 2016-11-15 13:54:23