jQuery实现本地存储


Posted in jQuery onDecember 22, 2020

用jQuery实现本地存储,供大家参考,具体内容如下

  • 要求:点击提交按钮,让用户输入的内容分别加入到表格对应的列表中
  • 要求:点击每一行的删除按钮,能删除当前行
  • 要求:刷新页面时能保留当前的页面效果(数据状态不会消失)

HTML结构

<div style="margin-bottom: 15px;">
    <input type="text" id="username" placeholder="请输入姓名">
    <input type="text" id="sex" placeholder="请输入性别">
    <input type="text" id="age" placeholder="请输入年龄">
    <input type="button" value="提交" id="btn">
  </div>
  <table border="1" width="540">
    <thead>
      <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>操作</td>
      </tr>
    </thead>
    <tbody>


    </tbody>
</table>

初始化数据

// 初始化数据的作用:清空页面存储的内容恢复到原始状态
var arr = [{
      'username': '小红',
      'sex': '女',
      'age': 24
    }, {
      'username': '小蓝',
      'sex': '男',
      'age': 24
    }]
    localStorage.setItem('data', JSON.stringify(arr))

入口函数

$(function () {
//...以下所有代码
}

按钮绑定点击事件

$('#btn').click(function () {
        // var data = getData()
        // 绑定点击事件
        var obj = {
          // 获取输入框中的值
          username: $('#username').val(),
          sex: $('#sex').val(),
          age: $('#age').val()
        }
        // 重新获取数据
        var data = getData()
        // 重新往本地添加数据
        data.push(obj)
        // 存储数据
        setData(data)
        // 渲染到页面
        randerData()

      })

获取本地存储中的数据并把数据转成复杂的数据类型

function getData() {
        // 获取的是字符串类型,获得数据,没有数据返回为空数组
        return JSON.parse(localStorage.getItem('data')) || []
      }

存储data中的数据

function setData(data) {
        // 存储数据并把复杂数据类型转换成字符串类型
        localStorage.setItem('data', JSON.stringify(data))
      }

封装页面渲染函数

function randerData() {
        // 渲染前先清空列表
        $('tbody').empty()
        // 获取数据
        var data = getData()
        // 遍历data里面的对象元素,获取对象元素里面的值
        // item是数组里面的元素
        data.forEach(function (item, i) {
          // 创建tr
          var tr = '<tr><td>' + item.username + '</td><td>' + item.sex + '</td><td>' + item.age + '</td><td><a href="javascript:;" rel="external nofollow" >删除</a></td></tr>'
          // 在主体的末尾中添加tr
          $('tbody').append(tr)
        })
      }
// 页面一打开就开始把本地存储中的数据添加上去
randerData()

用事件委托给每个删除链接绑定点击删除事件

// 不能直接获取a
$('tbody').on('click', 'a', function () {
// 移除它的祖父元素tr
$(this).parents('tr').remove()
 // 重新获取数据
 setData(data)
 // 重新渲染
 randerData()
 })

jQuery实现本地存储

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
jQuery实现电梯导航模块
Dec 22 #jQuery
jQuery实现tab栏切换效果
Dec 22 #jQuery
jQuery+ajax实现文件上传功能
Dec 22 #jQuery
jQuery实现动态向上滚动
Dec 21 #jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
jquery实现淡入淡出轮播图效果
Dec 13 #jQuery
jquery实现拖拽小方块效果
Dec 10 #jQuery
You might like
IIS6的PHP最佳配置方法
2007/03/19 PHP
php中array_multisort对多维数组排序的方法
2020/06/21 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
基于python实现可视化生成二维码工具
2020/07/08 Python
EJB的角色和三个对象
2015/12/31 面试题
给同学的道歉信
2014/01/16 职场文书
初中同学聚会感言
2014/02/11 职场文书
丧事主持词大全
2014/04/02 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
Go 语言结构实例分析
2021/07/04 Golang
vue选项卡切换的实现案例
2022/04/11 Vue.js
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript