localStorage新手必看不容错过

Posted 2020-09-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了localStorage新手必看不容错过相关的知识，希望对你有一定的参考价值。

1先看一个留言板的小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
    <fieldset>
        <legend>留言板</legend>
        <textarea name="text" rows="10" cols="50" style="resize:none;outline:none;" id="text"></textarea>
        <input type="button" value="留言" id="addNode" />
        <input type="button" value="查询" id="queryNode" />
        <input type="button" id="clearBotton" value="收起留言列表"/>
        <span>删除第</span>
        <input type="text" id="deleTxt" style="width:30px;outline:none"><span>条</span>
        <input type="button" id="deleNode" value="删除"/>
        <input type="button" value="初始化" id="clearNode"/>
    </fildset>    
    <p id="text2"></p>
    
</body>
<script type="text/javascript" src="jquery.js"></script>
<script>
$("input[type=button]").click(function(e){
    switch(e.target.id){
        case "addNode":
            var date=new Date();
            var val=$("#text").val();
            var str1=date.toLocaleDateString()
            var str2=date.toLocaleTimeString()
            if(val!=""){
                localStorage.setItem(str1+""+str2,val);
                alert("留言成功");
                $("#text2").empty();
                queryNode();
            }else{
                alert("请留言");
            }
            $("#text").val("");
            break;
        case "queryNode":
            $("#text2").empty();
            queryNode();
            break;
        case "clearNode":
            localStorage.clear();
            $("#text2").empty();
            $("#text").val("");
            queryNode();
            break;
        case "deleNode":
        console.log(parseInt($("#deleTxt").val())-1)
        console.log($("#deleTxt").val())
            if(localStorage.length>0&&$("#deleTxt").val()<=localStorage.length&&$("#deleTxt").val()>0){
                localStorage.removeItem(localStorage.key(parseInt($("#deleTxt").val())-1));
            }else{
                alert("您没有那么多留言可以清除~~")
            }
            $("#text2").empty();
            queryNode();
            break;
        case "clearBotton":
            $("#text2").empty();
            break;
        default:
            break;    

    }

    function queryNode(){
        
        for(var i=0;i<localStorage.length;i++){
            var key=localStorage.key(i);
            console.log(key);
            var value=localStorage.getItem(key);
            var date = new Date();
            //date.setTime(key);
            //var str = date.toGMTString();
            var str1=date.toLocaleDateString()
            var str2=date.toLocaleTimeString()
                //key(i)获得相应的键，再用getItem()方法获得对应的值
               /*$("#text2").append(‘第‘+(i+1)+"条:"+value+"。"+str1+" "+str2)*/
               $("#text2").append(‘第‘+(i+1)+"条:"+value+"。"+key);
               $("<br/><br/>").appendTo($(‘#text2‘));
            } 

    }
})


</script>

以上是关于localStorage新手必看不容错过的主要内容，如果未能解决你的问题，请参考以下文章

立足GitHub学编程：13个不容错过的Java项目

一个不容错过的Spring Cloud实战项目！

游戏中学会撸代码：这些编程学习网站不容错过

一台不容错过的Java单元测试代码 “永动机”

看大神教你正确理解单元测试，不容错过！

热门前端框架分析 || 前端攻城师不容错过