外贸建站 知乎,营销活动方案模板范文,中企动力总部在哪,如何创建wordpress数据库文件夹• 本地存储介绍
以前我们页面写的数据一刷新页面就没有了#xff0c;是不是#xff1f;随着互联网的快速发展#xff0c;基于网页的应用越来越普遍#xff0c;同时也变的越来越复杂#xff0c;为了满足各种各样的需求#xff0c;会经常 性在本地存储大量的数据#xf…• 本地存储介绍
以前我们页面写的数据一刷新页面就没有了是不是随着互联网的快速发展基于网页的应用越来越普遍同时也变的越来越复杂为了满足各种各样的需求会经常 性在本地存储大量的数据HTML5规范提出了相关解决方案。1、数据存储在用户浏览器2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大sessionStorage和localStorage约 5M 左右
• 本地存储分类 localStorage
作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除否则关闭页面也会存在
特性
Ø 可以多窗口页面共享同一浏览器可以共享
Ø 以键值对的形式存储使用
语法: 浏览器查看本地数据: sessionStorage
特性
Ø 生命周期为关闭浏览器窗口 Ø 在同一个窗口(页面)下数据可以共享 Ø 以键值对的形式存储使用 Ø 用法跟localStorage 基本相同 1. localStorage 作用是什么 可以将数据永久存储在本地(用户的电脑), 除非手动删除否则关闭页面也会存在 2. localStorage 存储获取删除的语法是什么 存储localStorage.setItem(key, value)获取localStorage.getItem(key)删除localStorage.removeItem(key) • 存储复杂数据类型
本地只能存储字符串,无法存储复杂数据类型. 保存复杂数据
解决需要将复杂数据类型转换成JSON字符串,在存储到本地
语法JSON.stringify(复杂数据类型) 将复杂数据转换成JSON字符串 存储 本地存储中 获取数据
解决把取出来的字符串转换为对象
语法JSON.parse(JSON字符串) 将JSON字符串转换成对象 数组中map方法 迭代数组 数组中join方法 综合案例
学生就业信息表
需求 录入学生信息页面刷新数据不丢失
模块分析 ①新增模块 输入学生信息数据会存储到本地存储中 ②渲染模块数据会渲染到页面中 ③删除模块点击删除按钮会删除对应的数据 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /title学生就业统计表/titlelink relstylesheet href./iconfont/iconfont.csslink relstylesheet hrefcss/index.css /
/headbodyh1学生就业统计表/h1form classinfo autocompleteoffinput typetext classuname nameuname placeholder姓名 required /input typetext classage nameage placeholder年龄 required /input typetext classsalary namesalary placeholder薪资 required /select namegender classgenderoption value男男/optionoption value女女/option/selectselect namecity classcityoption value北京北京/optionoption value上海上海/optionoption value广州广州/optionoption value深圳深圳/optionoption value曹县曹县/option/selectbutton classaddi classiconfont icon-tianjia/i添加/button/formdiv classtitle共有数据span0/span条/divtabletheadtrthID/thth姓名/thth年龄/thth性别/thth薪资/thth就业城市/thth录入时间/thth操作/th/tr/theadtbody!-- trtd1/tdtd迪丽热巴/tdtd23/tdtd女/tdtd12000/tdtd北京/tdtd2099/9/9 08:08:08/tdtda hrefjavascript:i classiconfont icon-shanchu/i删除/a/td/tr --/tbody/tablescriptconst tbody document.querySelector(tbody)const info document.querySelector(.info)const uname document.querySelector(.uname)const age document.querySelector(.age)const salary document.querySelector(.salary)const gender document.querySelector(.gender)const city document.querySelector(.city)const count document.querySelector(.title span)// console.log(count);// const obj {// stuId: 1,// uname: 李白,// age: 18,// gender: 男,// salary: 12000,// city: 深圳,// time: 2099/9/9 08:08:08,// }//做测试将对象加入本地存储中// arr.push(obj)// arr.push(obj)// localStorage.setItem(data,JSON.stringify(arr))//1 渲染数组数据// //1.1声明一个空数组// let arr []//1.2从本地存储中获取数据const arr JSON.parse(localStorage.getItem(data)) || []console.log(arr);// 1.3 声明一个函数渲染数据function render() {//使用map函数来处理数组数据返回一个新的数组const newArr arr.map(function (ele, index) {return trtd${ele.stuId}/tdtd${ele.uname}/tdtd${ele.age}/tdtd${ele.gender}/tdtd${ele.salary}/tdtd${ele.city}/tdtd${ele.time}/tdtda hrefjavascript: data-id${index}i classiconfont icon-shanchu/i删除/a/td/tr})//使用join函数将arr转化成一个字符串对象// let content newArr.join()// console.log(content);//将内容加入到tbody中tbody.innerHTML newArr.join()//更改统计的数字count.innerHTML arr.length}//调用渲染函数render()//2 向数组中添加数组//2.1 当用户点击添加按钮将数据追加到数组中info.addEventListener(submit, function (e) {//2.2阻止表单的默认行为e.preventDefault()// console.log(111);//2.3初始化对象const obj {stuId: arr.length 0 ? arr[arr.length - 1].stuId 1 : 1,uname: uname.value,age: age.value,gender: gender.value,salary: salary.value,city: city.value,time: new Date().toLocaleString(),}//将数据追加到arr数组中arr.push(obj)//将数据加入到本地存储中localStorage.setItem(data, JSON.stringify(arr))//重置表单this.reset()//调用渲染函数render()})//3.删除表单中的元素//3.1为所有的a添加单击事件--使用事件委托给tBody添加单击事件tbody.addEventListener(click, function (e) {//3.2只用点击a单击才生效if (e.target.tagName A) {// console.log(111);//3.3删除元素//获取元素a的自定义属性// console.log(e.target.dataset.id)if (confirm(你确定要删除这条数据吗)) {arr.splice(e.target.dataset.id, 1)//3.4 将输入保存到本地中localStorage.setItem(data, JSON.stringify(arr))//3.5 重新渲染render()}}})/script
/body/html
