当我重新加载页面时，我之前的评论消失了——这与本地存储有关

When I reload the page my previous comments disappear - something to do with local storage

本文关键字：消失了 评论 存储 新加载 加载      更新时间：2023-09-26

尝试使它，以便当我刷新页面时，以前的评论留在页面上。不太确定该怎么做。我还想知道你会怎么做，这样当你点击namebox时，你就不必突出显示"name"，然后写下你的名字，你只需要点击，你写的东西就会取代"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>
<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>

Jack，你可以像这样使用全局对象轻松地在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"));

你可以在MDN上阅读更多关于localStorage的信息

相关文章：