第二十节：本地存储案例驱动

第二十节：本地存储

sessionStorage：存储的数据在控制台 - Application - Session Storage

本地存储特性：

数据存储在用户浏览器中

设置、读取方便、甚至页面刷新不丢失数据

容量较大，sessionStorage 约 5M、localStorage 约 20M

只能存储字符串，可以将对象 JSON.stringify() 编码后存储

数据的生命周期为关闭浏览器

/ 语法格式：
// 存储数据
sessionStorage.setItem('键名', 数据);
// 获取数据
sessionStorage.getItem('键名');
// 删除数据
sessionStorage.removeItem('键名');
// 清空数据
sessionStorage.clear();

序列化

案例驱动

案例1：省市区三级联动

经典案例：省市区三级联动

涉及知识点

select：多选下拉菜单
- option：选项
- disabled：禁用下拉菜单
change() 事件
- 当用于 select 元素时，change 事件会在选择某个选项时发生。
- 当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

代码实现

data 为城市数组对象

/ 数组对象格式为：data = [{name: '北京',cityList: [{name: '市辖区',areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '海淀区', '顺义区', '昌平区']},{name: '县',areaList: ['密云县', '延庆县']}]},
]

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>省市区三级联动</title><style>* {padding: 0;margin: 0;}.wrap {width: 1000px;margin: 100px auto;text-align: center;}select {width: 200px;height: 36px;font-size: 24px;outline: none;}</style>
</head>
<body><div class="wrap"><select id="province"><!-- <option selected disabled>--请选择--</option> --></select><select id="city"><option selected disabled>--请选择--</option></select><select id="area"><option selected disabled>--请选择--</option></select></div><script src="./js/data.js"></script><script>/* 1.获取元素 */// 1.1 获取省市区let province = document.querySelector('#province');let city = document.querySelector('#city');let area = document.querySelector('#area');// 1.2 定义省市区下标let pIndex;let cIndex;let aIndex;/* 2.渲染省份 */render(province, data);/* 3.给省份绑定 点击 事件 */province.addEventListener('click', function () {//  3.1 省份下标pIndex = province.selectedIndex - 1;// 3.2 重置县区area.selectedIndex = 0;// 3.3 当下标为-1时， 结束事件if (pIndex == -1) return;// 3.4 渲染市区render(city, data[pIndex].cityList);});// 4. 给城市绑定 点击 事件city.addEventListener('click', function () {// 4.1 城市下标cIndex = city.selectedIndex - 1;// 4.2 渲染区县render(area, data[pIndex].cityList[cIndex].areaList);});// --------------------- 封装函数 ---------------------/** 封装渲染函数 */function render(element, data) {/** 在每一项拼接一个请选择选项，主要用于默认选项 */element.innerHTML = '<option selected disabled>--请选择--</option>' + data.map(function (item, index) {return `<option value="${item.name || item}">${item.name || item}</option>`;}).join('');}</script>
</body>
</html>

案例2：轮播图

经典案例：轮播图

涉及知识点

代码实现

案例3：楼层导航

经典案例：楼层导航

涉及知识点

代码实现

html 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>楼层导航</title><style>* { padding: 0; margin: 0; list-style: none; }ul { position: fixed; top: 50%; right: 10px; width: 80px; }ul li { background-color: green; margin-bottom: 10px; width: 100%; height: 36px; line-height: 36px; text-align: center; color: #ddd; cursor: pointer; }.wrap { background: #f1f1f1; }.content { margin: 0 auto; width: 1000px; font-size: 500px; color: #fff; position: relative; }.content .box { height: 1000px; line-height: 1000px; text-align: center; }ul li.active { background-color: purple; }</style>
</head>
<body><div class="wrap"><ul><!-- <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> --></ul><div class="content"><!-- <div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div> --></div></div><script src="./js/index.js"></script></body>
</html>

Js 代码

// 模拟楼层数据
let list = [1, 2, 3, 4, 5];// 获取元素
let ul = get('ul');
let content = get('.content');
// 楼层下标
let index = 0;
// 一个盒子高度
let height;// 滚动事件
window.addEventListener('scroll', function () {// 滚动的距离let top = window.pageYOffset;// 更改楼层下标index = Math.round(top / height);// 重新渲染楼层renderFloor();
});// 渲染楼层
renderFloor();
// 渲染数据
renderContent();// 给ul绑定点击事件
ul.addEventListener('click', function (event = event || window.event) {// 判断点击的是否是liif (event.target.nodeName == "LI") {// 更改下标idnex = event.target.dataset.index * 1;// 设置滚动距离window.scrollTo(0, idnex * height);}
});/* ------------------封装函数------------------ */// 渲染楼层
function renderFloor() {ul.innerHTML = list.map(function (item, i) {return `<li data-index="${i}" class="${index == i ? 'active' : ''}">${item}</li>`;}).join('');
}// 渲染数据
function renderContent() {content.innerHTML = list.map(function (item) {return `<div class="box" style="background: rgb(${random(0,255)}, ${random(0,255)}, ${random(0,255)});">${item}</div>`;}).join('');height = content.children[0].offsetHeight;
}// 封装一个DOM
function get(selector, element = document) {return element.querySelector(selector);
}// 封装多个DOM
function gets(selector, element = document) {return element.querySelectorAll(selector);
}// 创建一个随机数
function random(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);
}

案例4：动态创建表格

经典案例：动态创建表格

涉及知识点

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态创建表格</title><link rel="stylesheet" href="./css/user.css">
</head><body><button>动态创建表格</button><!-- <div id="box"></div> --><script>// 后端的数据let heads = ['姓名', '年龄', '性别', '学号', '薪资', '城市', '操作'];let datas = [{ name: '欧阳霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '上海' },{ name: '令狐霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '北京' },{ name: '诸葛霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '南京' },{ name: '西门霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '深圳' },{ name: '上官霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '北京' },{ name: '欧阳霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '上海' },{ name: '令狐霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '北京' },{ name: '诸葛霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '南京' },{ name: '西门霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '深圳' },{ name: '上官霸天', age: 19, gender: '男', stuId: '1001', salary: '20000', city: '北京' },];// 获取元素let btn = get('button');btn.addEventListener('click', function (event = event || window.event) {// 创建盒子，赋值idlet box = crea('div');box.id = 'box';// 创建 h3标题，赋值classNamelet h3 = crea('h3');h3.classList.add('caption');h3.innerHTML = '就业榜';// box追加h3元素box.appendChild(h3);// 创建表格let table = crea('table');// 创建 theadlet thead = crea('thead');// 创建 trlet tr = crea('tr');/* 2. 渲染内容 */// 渲染 theadfor (let i=0; i<heads.length; i++) {// 创建 td 元素节点let th = crea('th');// 渲染 td内容th.innerHTML = heads[i];// tr 追加 thtr.appendChild(th);}// thead 追加 trthead.appendChild(tr);// 创建 theadlet tbody = crea('tbody');// 渲染tbodyfor (let i=0; i<datas.length; i++) {// 创建 trlet tr = crea('tr');// 渲染 trfor (const key in datas[i]) {// 创建 td 元素节点let td = crea('td');td.innerHTML = datas[i][key];// tr 追加tdtr.appendChild(td);}// 创建 td，追加删除let td = crea('td');td.innerHTML = '删除';td.dataset.index = i;tr.appendChild(td);// tbody 追加 trtbody.appendChild(tr);}/* 追加元素 */table.appendChild(thead);table.appendChild(tbody);box.appendChild(table);document.body.appendChild(box);});// 删除元素document.addEventListener('click', function (event = event || window.event) {// 判断点击的是否是删除if (event.target.innerHTML == '删除') {// 删除父元素event.target.parentNode.remove();}});/* ---------------- 封装函数 ---------------- */// 封装一个 DOMfunction get(selector, element = document) {return element.querySelector(selector);}// 封装多个 DOMfunction gets(selector, element = document) {return element.querySelectorAll(selector);}// 封装 创建元素function crea(selector, element = document) {return element.createElement(selector);}</script>
</body>
</html>

案例5：购买计价

经典案例：购买计价

涉及知识点

代码实现

第二十节：本地存储案例驱动相关推荐

Python编程基础：第二十节函数Function
第二十节函数Function 前言实践前言目前为止,我们已经学习了常见的数据类型以及逻辑结构.但是代码都只能运行一次,如果想多次运行该段代码就得重复写多次.为了避免书写冗余的代码,我们需要引入 ...
大白话5分钟带你走进人工智能-第二十节逻辑回归和Softmax多分类问题(5)
大白话5分钟带你走进人工智能-第二十节逻辑回归和Softmax多分类问题(5) 上一节中,我们讲 ...
vue本地存储案例_本地化还是创意适应？流氓游戏街的案例研究
vue本地存储案例关于游戏<流氓街头> (About the game Streets of Rogue) In 2017 tinyBuild released Streets of R ...
火云开发课堂 - 《Shader从入门到精通》系列第二十节:在Shader中对3D模型进行多纹理混合
<Shader从入门到精通>系列在线课程优惠链接:http://edu.csdn.net/combo/detail/90 第二十节:在Shader中对3D模型进行多纹理混合视频地址: ...
第二十节：Scrapy爬虫框架之使用Pipeline存储
在上两节当中,我们爬取了360图片,但是我们需要将图片下载下来,这将如何下载和存储呢? 下边叙述一下三种情况:1.将图片下载后存储到MongoDB数据库:2.将图片下载后存储在MySQL数据库:3.将 ...
第二十节: 深入理解并发机制以及解决方案(锁机制、EF自有机制、队列模式等)
一. 理解并发机制 1. 什么是并发,并发与多线程有什么关系? ①. 先从广义上来说,或者从实际场景上来说. 高并发通常是海量用户同时访问(比如:12306买票.淘宝的双十一抢购),如果把一个用户看做 ...
Scala入门到精通——第二十节类型参数（二）
本节主要内容 Ordering与Ordered特质上下文界定(Context Bound) 多重界定类型约束 1. Ordering与Ordered特质在介绍上下文界定之前,我们对Scala中的 ...
第十五节：Asp.Net Core MVC和WebApi路由规则的总结和对比-第二十节
一. Core Mvc 1.传统路由 Core MVC中,默认会在 Startup类→Configure方法→UseMvc方法中,会有默认路由:routes.MapRoute("defaul ...
第二十节：一个缺失已久的特性 — module模块
在ES6之前,Javascript还不支持原生的模块化.如果要实现模块化,我们要借助一些框架,比如:requireJS或者seaJS等:什么?没用过也没听过这些框架?没关系,它们不是我们今天要讲的重点 ...

第二十节：本地存储案例驱动

第二十节：本地存储

序列化

案例驱动

案例1：省市区三级联动

涉及知识点

代码实现

案例2：轮播图

涉及知识点

代码实现

案例3：楼层导航

涉及知识点

代码实现

案例4：动态创建表格

涉及知识点

代码实现

案例5：购买计价

涉及知识点

代码实现

第二十节：本地存储案例驱动相关推荐

最新文章

热门文章

第二十节：本地存储 案例驱动

第二十节：本地存储

序列化

案例驱动

案例1：省市区三级联动

涉及知识点

代码实现

案例2：轮播图

涉及知识点

代码实现

案例3：楼层导航

涉及知识点

代码实现

案例4：动态创建表格

涉及知识点

代码实现

案例5：购买计价

涉及知识点

代码实现

第二十节：本地存储 案例驱动相关推荐

最新文章

热门文章

第二十节：本地存储案例驱动

第二十节：本地存储案例驱动相关推荐