localstorage增删改查易踩坑

最新推荐文章于 2024-06-07 09:17:51 发布

小小地鼠

最新推荐文章于 2024-06-07 09:17:51 发布

阅读量290

点赞数

分类专栏： jQuery localstorage 文章标签： jquery bootstrap

本文链接：https://blog.csdn.net/qq_47664976/article/details/115041684

版权

jQuery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

localstorage

1 篇文章 0 订阅

订阅专栏

localstorage增删改查易踩坑

jQuery阶段作品是做一个具有增删改查功能的后台系统（模拟增删改查，不牵涉数据库），遇到了一些问题，耗费了很多时间，今天我将其总结一下。

一.juery动态添加Dom节点，原点击事件无效的方法。

详细看以下代码：

<div id="box">
        <span class="One">我是原有标签，点击我控制台输出信息</span>
    </div>

<script>
        //新生成的元素点击无效果
        $(".One").click(function() {
                console.log("我是一个标签");
                $("#box").append('<br><span class="spanOne">我是新生成的标签，点击我控制台没有效果</span><br>')
            })
</script>

解决方法如下：

  $(document).on('click', function() {
         console.log("我是一个标签");
         $("#box").append('<br><span class="One">我是新生成的标签，点击我此时有效果</span><br>')

     })
  //   $("#box") 为新增加的dom节点所在的父元素， '.spanOne'是添加节点的class属性
  
    或者
    
     $("#box").on('click', '.One', function() {
             console.log("我是一个标签");
             $("#box").append('<br><span class="One">我是新生成的标签，点击我此时有效果</span><br>')
         })
         //以上的两种方式都可以，都是利用了事件的捕获

刚开始这个问题一直解决不了，然后也试过刷新页面，即location.reload()，来动态添加，但是这种方法是绝对达不到使用要求的，而以上方法则可以完美解决。

二.切换头像图片的问题

这个问题当时花费了很长时间，最后也是问问了同学才得到解决，具体代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pictures {
            width: 166px;
            height: 166px;
            background-color: #fff;
            border-radius: 50%;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <input type="file" id="imgfile" method="post" enctype="multipart/form-data">
    <button type="button" onclick="ToBase64();" style="width: 100px;height: 100px;">点击我！！！</button>
    <div class="pictures">
        <img src="" id="png">
    </div>
    <script>
        function ToBase64() {
            var img = document.getElementById('imgfile')

            console.log(img)
            var imgFile = new FileReader();
            //创建一个filereader对象，可以将读取到的文件编码成Data URL。
            var imgData;
            imgFile.readAsDataURL(img.files[0]);
            imgFile.onload = function() {
                imgData = imgFile.result; //base64数据  
                //返回上次click事件的值
                console.log(imgData);
                var png = document.getElementById("png");
                png.src = imgData;
            }
        }
    </script>
</body>

</html>

效果如下：

切换头像图片demo

三.localstroage存储demo

实例如下：

<!DOCTYPE html>
 <html lang="en">
 <head>
      <meta charset="UTF-8">
     <title>HTML5-任务列表</title>
  </head>
  <body>
 
  <div>
     <input id="shuru" type="text" width='200'></input>
     <input id="save" type="button" value="保存"/>
     <input id="clearMsg" type="button" value="清空本地存储"/>
     <p style="color: #286090;font-size: 20px;">任务列表</p>     <hr/>
     <div id="todoList"></div>
 </div>
 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
 <script>
     // 从本地存储加载任务列表
     var msgList = localStorage.getItem("msgList");
     /*
     localStroage.getItem(key):获得指定key本地存储的值
     localstroage.setItem(key,value):将value存储到key字段
     localstroage.removeItem(key):删除指定key本地储存的值
     */
 console.log(msgList);
     if (msgList !== null && msgList !== undefined && msgList != ' ') {
         // 展示任务列表
         document.getElementById("todoList").innerHTML = msgList;
     }
     // 添加并保存单个任务
     $("#save").click(function () {
         var shuru = document.getElementById("shuru").value;
         if (shuru == null || shuru == '') {
             alert("请输入任务")
             return;
         }
         var todoMsgHtml = '<h5><span style="color: red">任务:</span>' + shuru + '</h5>';
         // 追加到任务列表
         msgList = (msgList == null ? '' : msgList) + todoMsgHtml;
         localStorage.setItem("msgList", msgList);
         // 刷新任务列表
         document.getElementById("todoList").innerHTML = msgList;
     });
     // 清空任务列表并刷新浏览器
     $("#clearMsg").click(function () {
         localStorage.clear();
         document.getElementById("clearMsg").innerHTML = "";
         location.reload();
     });
 </script>

 </body>
 </html>

此例子可以很好的理解怎么使用localstroage来进行存储的。

以上就是我今日的分享。。

小小地鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
localstorage增删改查易踩坑

localstorage增删改查易踩坑jQuery阶段作品是做一个具有增删改查功能的后台系统（模拟增删改查，不牵涉数据库），遇到了一些问题，耗费了很多时间，今天我将其总结一下。一.juery动态添加Dom节点，原点击事件无效的方法。详细看以下代码：<div id="box"> <span class="One">我是原有标签，点击我控制台输出信息</span> </div><script> //新
复制链接

扫一扫