码迷,mamicode.com
首页 > Web开发 > 详细

基于localStorage的Web版记事本

时间:2020-07-26 19:50:29      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:item   break   hidden   lang   tab   char   let   date()   border   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于localStorage的Web版记事本</title>
</head>
<body>
    <section>
        <h3>Web版记事本</h3>
        <textarea id="data" cols="30" rows="10"></textarea>
        <br><br>
        <input type="button" value="保存" id="save">
        <input type="button" value="读取" id="read">
        <input type="button" value="修改" id="update">
        <input type="button" value="删除" id="del">
        <input type="hidden" value="" id="mykey">
        <br><br>
    </section>
    <section id="dataList"></section>
    <script>
        // 隐藏域
        let mykey = document.getElementById("mykey");
        let data = document.getElementById("data");
        let dataList = document.getElementById("dataList");
        let radios = document.getElementsByName("texts");
        // 保存模块
        let save = document.getElementById("save");
        save.onclick = mySave;
        function mySave(){
            if(data.value === "" || data.value === null){
                alert("请输入内容");
            }else{
                let key = mykey.value;
                if(key === "" || key === null){
                    key = new Date().getTime();
                }
                localStorage.setItem(key,data.value);
                data.value = "";
                mykey.value = "";
            }
            myRead();
        }
        // 读取模块
        let read = document.getElementById("read");
        read.onclick = myRead;
        function myRead(){
            let table = "<table border=‘1px‘><tr><th></th><th>key</th><th>value</th></tr>";
            for(let i=0; i<localStorage.length; i++){
                let key = localStorage.key(i);
                let value = localStorage.getItem(key);
                table += "<tr><td><input type=‘radio‘ name=‘texts‘ value=‘"+key+"‘></td><td>"+key+"</td><td>"+value+"</td></tr>";
            }
            table += "</table>";
            dataList.innerHTML = "";
            dataList.innerHTML += table;
        }
        // 修改模块
        let update = document.getElementById("update");
        update.onclick = myUpdate;
        function myUpdate(){
            for(let i=0; i<radios.length; i++){
                let radio = radios[i];
                if(radio.checked){
                    mykey.value = radio.value;
                    break;
                }
            }
            data.value = localStorage.getItem(mykey.value);
        }
        // 删除模块
        let del = document.getElementById("del");
        del.onclick = myDel;
        function myDel(){
            let key;
            for(let i=0; i<radios.length; i++){
                let radio = radios[i];
                if(radio.checked){
                    key = radio.value;
                    break;
                }
            }
            localStorage.removeItem(key);
            myRead();
        }
         // localStorage.clear();
    </script>
</body>
</html>

  

基于localStorage的Web版记事本

标签:item   break   hidden   lang   tab   char   let   date()   border   

原文地址:https://www.cnblogs.com/SharkJiao/p/13381092.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!