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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
json跟xml的对比分析
2008/06/10 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
python二叉树的实现实例
2013/11/21 Python
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
说一说Python logging
2016/04/15 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
用Python实现KNN分类算法
2017/12/22 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
自我鉴定模板
2013/10/29 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
会计毕业生自荐书
2014/06/12 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
公司员工离职感言
2015/08/03 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript