Question

我找到了javascript代码，用于将生日数据存储到本地存储并在div中显示数据。现在如果存储空了则不显示任何内容。但我需要如果本地存储空了然后显示一条消息，例如“先设置你的生日”

这里有以下div显示数据

感谢所有

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
</head>

<body>



<script>
$(function storeDates(form){
    var operation = "A"; //"A"=Adding; "E"=Editing

    var selected_index = -1; //Index of the selected list item

    var tbClients = localStorage.getItem("tbClients");//Retrieve the stored data

    tbClients = JSON.parse(tbClients); //Converts string to object

    if(tbClients == null) //If there is no data, initialize an empty array
        tbClients = [];

    function Add(){



        var client = JSON.stringify({
            birthday : $("#birth_day").val(),
            patientno:$("#patient_no").val()

        });


        tbClients.push(client);
        localStorage.setItem("tbClients", JSON.stringify(tbClients));

        return true;
    }

    function Edit(){
        tbClients[selected_index] = JSON.stringify({
                    ID    : $("#name").val(),

            });//Alter the selected item on the table
        localStorage.setItem("tbClients", JSON.stringify(tbClients));
        alert("The data was edited.")
        operation = "A"; //Return to default value
        return true;
    }

    function Delete(){
        tbClients.splice(selected_index, 1);
        localStorage.setItem("tbClients", JSON.stringify(tbClients));
        alert("Client deleted.");
    }

    function List(){        
        $("#tblList").html("");
        $("#tblList").html(
            "<thead>"+
            "   <tr>"+

            "   <th></th> "+



            "   </tr>"+
            "</thead>"+
            "<tbody>"+
            "</tbody>"
            );
        for(var i in tbClients){
            var cli = JSON.parse(tbClients[i]);}

            $("#tblList tbody").append("<tr>"+



                                         "  <td ><span class='dayText'><b class='dayclass'>"+         
                                          "Birth  day"+cli.birthday + "</td>" + 

                                         "</tr>");


                $("#patient_number").append(cli.patientno );


    }

    $("#frmCadastre").bind("submit",function(){     
        if(operation == "A")
            return Add();
        else
            return Edit();
    });

    List();

    $(".btnEdit").bind("click", function(){

        operation = "E";
        selected_index = parseInt($(this).attr("alt").replace("Edit", ""));

        var cli = JSON.parse(tbClients[selected_index]);
        $("#deliveryday").val(cli.ID);

    });

    $(".btnDelete").bind("click", function(){
        selected_index = parseInt($(this).attr("alt").replace("Delete", ""));
        Delete();
        List();
    });
});
</script>


<FORM name="f1" id="frmCadastre" > 




       <section id="aligned">


    <input type="text" id="birth_day" name="birth_day" placeholder=" Birth day :" autocomplete="off" tabindex="2" class="txtinput" required><br/><br/>
    <input type="text" id="patient_no" name="patient_no" placeholder=" patient no" autocomplete="off" tabindex="2" class="txtinput" required><br/><br/>



    <input type="submit" name="submit" id="btnSave" class="submitbtn" tabindex="7" onClick="storeDates(this.form); "  />
</form>


   <div id="tblList"></div>
    <div id="patient_number"></div>

</body>
</html>

Answer 1

首先，如何通过localStorage工作

if(!localStorage.tbClients) alert("Empty");

获取数据的另一种方法

if(!localStorage.getItem("tbClients")) alert("Empty");

这种方法之间的区别：

如果此类键值不存在，您将获得 UNDEFINED 值
如果此类键值不存在，您将获得 NULL 值

现在关于你的问题

//getting value
var message = localStorage.getItem("SOME_KEY") || "Firstly save your value to localStorage";
console.log(message); 
// if user already save something in localStorage we will see it, otherwise "Firstly save your value to localStorage"

Answer 2

使用以下代码替换部分代码：

if (cli.birthday <> "" ) {
  $("#tblList tbody").append("<tr>" +
                "   <td ><span class='dayText'><b class='dayclass'>" +
                "Birth  day : Set Birthday First</td>" +

                "</tr>");
}
else {
  $("#tblList tbody").append("<tr>" +
                "   <td ><span class='dayText'><b class='dayclass'>" +
                "Birth  day" + cli.birthday + "</td>" +

                "</tr>");
 }

如果本地存储空，则显示消息

2 个答案: