由于工作需要，之前学习了一些前端开发的知识。现进行笔记分享。
1. HTML简介
1.1什么是HTML?
HTML是超文本标记语言的简称（Hyper Text Markup Language），是一种用来告知浏览器如何组织页面的标记语言。其中HTML使用标记标签来描述网页。
1.2 HTML标签和文档
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <p> 和 </p>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML文档（.html）即是一个网页：
<html>
<body>
<h1>标题</h1>
<p>段落</p>
</body>
</html>上述，打开便是一个网页：
2. HTML属性
html可以提供属性，以此提供有关HTML元素更多信息，属性是以名称=值的形式出现的，比如上述HTML<a>标签中的href="www.baidu.com"就是属性。属性是在开始标签中定义的。
除此之外，还有其他的属性等等（这里主要是举例，后面细学）：
① 文字居中：<p align="center">aaa</p>
② 定义body背景颜色：<body bgcolor = "red">
③ 定义表格<table>的边框信息：<table border="1">3. 基本标签
3.1. 标题
html的标题是通过标签<h1> - <h6>实现的
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
（效果如图）
3.2. 段落
html的段落是由<p>标签实现的：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<p>这是段落</p>
</body>
</html>
3.3. 链接
html的链接是由标签<a>实现的：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<a href="https://www.baidu.com">跳转百度的链接</a>
</body>
</html>
点击跳转即可实现连接效果。
属性target:可以定义链接在何处跳转:
1、打开新窗口： target = "view_window"、target="_blank"、
2、不打开：不写target或者target = "_self"
属性name:
name 属性规定锚（anchor）的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示，它对读者是不可见的。
3.4.图像
html的图像由<img>标签进行定义
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.a_2XJOKnYxsnGU-tYazCWwHaF7?w=225&h=180&c=7&r=0&o=5&pid=1.7" width="400px" height="300px">
</body>
</html>
属性：
src: source就是图像的URL地址。
alt:为图像设置一串可以替换的文本，当浏览器无法载入图像的时候，alt的文本信息可以告诉读者出现了问题。
align:align可以设置图像的浮动位置。
使用图像的时候，我们应该知道加入我们放了多个图像在这个页面，浏览器需要加载11个文件，加载事件是需要时间的，因此我们需要慎用图片。
3.5. 引用
短引用：html中提供了<q>标签来进行引用。
长引用：html中提供<blockquote>来进行引用。
3.6. 缩略词
用户缩略图的是<abbr>
<html>
<body>
<p>鼠标聚焦可以看到：<abbr title="鸡哥是坤坤">鸡</abbr></p>
</body>
</html>
3.7. 定义
这个和缩略词很像，区别是缩略图带着虚线
<html>
<body>
<p>鼠标聚焦可以看到：<dfn title="鸡哥是坤坤">鸡</dfn></p>
</body>
</html>
3.8. 表格：
我们可以使用HTML在页面创建表格，表格由<table>标签来定义，其中每个表格均有多行，每一个行由<tr>标签定义，而每行又可以分为多个格子<td>标签定义，表头可以用<th>标签进行定义。
如下为例子：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<!-- 创建一个表格-->
<table border="1">
<!-- tr表示一行吗 -->
<tr>
<th colspan="2">这是一个表格</th>
</tr>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>stukk</td>
<td>男</td>
</tr>
</table>
</body>
</html>
属性：
border：边框：可以设置边框的宽度
width：设置表格的宽度
align：设置表格的对齐方式
cellspacing：设置单元格间距
bgcolor：背景颜色
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<!-- 创建一个表格-->
<table border="1" cellspacing="0" cellpadding="0" bgcolor="gray">
<!-- tr表示一行吗 -->
<tr>
<th colspan="2">这是一个表格</th>
</tr>
<tr>
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>stukk</td>
<td>男</td>
</tr>
</table>
</body>
</html>
3.9 列表
HTML中的列表分为了无序列表和有序列表两种：
无序列表：使用圆点进行标记：列表开始于标签<ul>，每个列表项开始于标签<li>:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<ul>
<li>姓名： stukk</li>
<li>性别： 男</li>
</ul>
</body>
</html>
有序列表：可以使用属性start定义开始的数字进行标记,
与无序列表的差别是：使用的标签是<ol>，列表中的每个项使用<li>标签
3.10 输入框
html中使用<input>标签来定义输入框。其属性包含以下几种：
| 属性 | 说明 |
| type | 定义input的类型 |
| required | 是否必填 |
| pattern | 内容需要匹配正则表达式 |
| min / max | 限制最大值最小值 |
| placeholder | 内容为空时显示的内容 |
| readonly | 让表单控件不可编辑 |
| disabled | 禁用表单属性 |
| maxlength | 限制最大数字限制 |
| size | 控制大小 |
| autocomplete | 自动补全，根据历史纪录，可以设置on |
| autofocus | 页面加载后，自动获得焦点 |
| form | 进行表的套嵌。 |
其中属性type可以定义多种类型的input，比如文本字段、密码字段等等，如下表展示输入框input的类型：
（ps：上图引用自：Html中input标签的详解_html input-CSDN博客）
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<ol>
<li>普通文本：<input required type="text"></li>
<li>密码文本：<input type="password"></li>
<li>按钮：<input type="button" value="按钮"></li>
<li>复选框：<input type="checkbox"></li>
<li>单选按钮：<input type="radio"></li>
<li>提交按钮：<input type="submit"></li>
<li>上传文件：<input type="file"></li>
<li>隐藏字段：<input type="hidden"></li>
<li>定义图像作为按钮：<input type="image" src="button.png" width="50px"></li>
<li>重置按钮:<input type="reset"></li>
<li>定义Email字段：<input type="email"></li>
<li>定义URL字段：<input type="url"></li>
<li>定义电话字段：<input type="tel"></li>
<li>定义数字字段：<input type="number"></li>
<li>范围：<input type="range"></li>
<li>搜索框：<input type="search"></li>
<li>颜色选择器：<input type="color"></li>
<li>日期选择器：<input type="date"></li>
</ol>
</body>
</html>
3.11 表单
html中使用了标签<form>来定义表单，在form表单中可以上用上述input组件搭建成为一个表单给用户填写，其中submit可以对应action设置的路径提交这个表单。
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<form action="" method="get">
<fieldset>
<legend>Title</legend>
<div class="form-example">
<label for="name">Enter your name: </label>
<input type="text" name="name" id="name" required />
</div>
<div class="form-example">
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required />
</div>
<div class="form-example">
<input type="submit" value="Subscribe!" />
</div>
</fieldset>
</form>
</body>
</html>
3.12 块
在HTML中，元素被分为了块级元素和内联元素：
块级元素在浏览器显示的时候会以新的一行来开始：such as: <h1>,<p>,<ul>,<table>
内联元素在显示时，不会以新的一行开始：such as: <td>,<a>,<img>
HTML中<div>标签就是一个块级元素，它可以用来组合其他HTML元素的容器，<div>没有特定的含义。我们可以通过操控CSS来进行布局
HTML中<span>则是一个内联元素，和div一样，他也没有具体的意义
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body>
<div>
<div>aaa <span>bbb</span> </div>
<span>ccc</span>
<div>ddd</div>
</div>
</body>
</html>
4. HTML样式
style属性用来改变HTML的元素样式。
有了style样式属性之后，有一些标签和样式被抛弃了（比如：<center>、<s>、<u>、align、bgcolor、color） ,如下替换了已经被html4标准删除的标签：
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
</head>
<body style="background-color: red">
<h1 style="text-align: center">aaa</h1>
</body>
</html>
5.HTML颜色
html中的颜色主要是由红、绿、蓝三原色组成的：RGB，它是一个十六进制符号
6. HTML类（Class）和 Id
我们可以在HTML的标签中使用类class和id，这样可以为元素定义CSS，为相同而类定义相同的CSS，也方便JavaScript获取元素。
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html">
<style>
.mouse{
color: gray;
font-size: large;
}
#cat{
color: orange;
font-size: medium;
}
</style>
</head>
<body>
<div class="mouse">老鼠人。。。。老鼠人</div>
<div id="cat">猫咪 猫咪</div>
</body>
</html>
7. 内联框架
html中使用iframe在网页内显示网页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe width="" src="test.html">
</iframe>
</body>
</html>
8. HTML 头部
hrml的头部放在标签<head>中，<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
其中，<title>表示文档的标题、<base>标签为页面上的所有链接规定默认地址或默认目标、
<link> 标签定义文档与外部资源之间的关系，比如引入CSS文件和JS文件、<syle>用于编写CSS、<meta提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<base href="#"/>
<link rel="stylesheet" type="text/css" href="xxx.css">
<script rel="script" src="xxx.js"></script>
<meta name="keywords" content="HTML,CSS,JavaScript">
</head>
<body>
sss
</body>
</html>9.HTML5
HTML5是HTML最新的修订版本，h5的设计主要是为了在移动端支持多媒体，其对比HTML多了很多的新元素、新属性以及支持CSS3等等。
新的标签如下：
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符 |
接下来介绍一些新的元素：
9.1.Canvas
在HTML中，<canvas>标签用于图形绘制，通过脚本Javascript绘制出图形，然后放在<canvas>容器内，接下来我们用一个例子来测试：我们先创建一个画布<canvas>
<body>
<canvas id="canvas1" width="200" height="100" style="border: 1px solid black">
</canvas>
</body>接下来时使用js来画画。
let can = document.getElementById("canvas1"); //首先找到<canvas>元素
let context = can.getContext("2d"); //创建context对象
context.fillStyle = "pink"; //绘制背景颜色
context.fillRect(0,0,150,75); //定义填充方式画线：
在canvas中画线，我们可以使用：
moveTo(x , y) 定义线条的开始坐标
lineTo(x , y)定义线条结束坐标
最后加上stroke()方法绘制
//下面是绘制线条：
context.moveTo(10,10);
context.lineTo(200,100);
context.stroke();
// 下面是绘制圆形：
context.beginPath();
context.arc(50,50,50,0,2*Math.PI);
context.stroke();文本:
主要使用的方法：
使用font 定义字体
1. fillText(text , x , y) 在canvas上绘制实心的文本
2. strokeText(text , x , y) 绘制空心文本
// 接下来是写文本：
context.font="30px 楷体"; //设置字体
context.fillText("Hello World",10,30); //设置实心字体
context.strokeText("你好",30,60); //设置空心字体渐变：
渐变可以填充在矩形、圆形、线条、文本等等，各种形状可以定义不同的颜色。
// 创建渐变
let grd = context.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
// 填充渐变
context.fillStyle=grd;
context.fillRect(10,10,180,80);图像：
//添加图片
let img = new Image();
img.src = "button.png";
img.onload = function (){
context.drawImage(img,0,0);
}9.2. SVG
SVG 是可缩放矢量图形，使用<svg>
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
SVG优势
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
如下，我们做一些SVG，我们可以把它当作图标使用，省去加载图片的时间：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG</title>
</head>
<body>
<h4>绿色圆形</h4>
<svg>
<circle cx="42" cy="42" r="40" stroke="black" stroke-width="2" fill="green" />
</svg>
<h4>五角星</h4>
<svg height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:#ce1354;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>
</body>
</html>9.3.拖放
在属性draggable中可以赋值true，之后呢，我们可以使用js处理拖拽事件，详情请见代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Draggable</title>
<style type="text/css">
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#div2 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
let data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖动图片到:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="button.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
9.4. 语义元素
语义元素可以清楚的表示这个标签的意义给浏览器和开发者。
比如：<div> 和 <span>就是无语义的
<form><table>等就是由语义的。
H5中出现了新的语义元素：<header、nav、section、article、aside、figcaption、figure、footer>
9.5. Web存储
h5中有着web存储，它主要是存储在用户本地的浏览器上，比cookie要更加安全，数据主要以键值对的形式存在。
客户端存储的两个对象是：LocalStorage和SessionStorage。
LocalStorage：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
SessionStorage：用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
使用如代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Storage</title>
</head>
<body>
<div id="result"></div>
</body>
<script>
// 存储
localStorage.setItem("name", "stukk"); //以键值对的形式存放
// 查找
document.getElementById("result").innerHTML = "名字：" + localStorage.getItem("name");
</script>
</html>接下来我们利用这个存储来开发简单的书本网站表单增删改查功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>书本表单</title>
</head>
<body>
<div style="width: 500px">
<fieldset>
<legend>请输入你要添加的书名：</legend>
<label>书名：</label>
<input id="text" type="text">
<input type="button" onclick="submitBtn()" value="提交"/>
</fieldset>
<fieldset>
<legend>您提交的书：</legend>
<label>书名：</label>
<input id="book" disabled type="text">
<input type="button" id="deleteBtn" onclick="Delte()" style="background-color: red; display: none" value="删除"/>
<input type="button"id="searchBtn" onclick="search()" value="查询"/>
</fieldset>
</div>
</body>
<script>
let text = document.getElementById("text");
let book = document.getElementById("book");
let deleteBtn = document.getElementById("deleteBtn");
let searchBtn = document.getElementById("searchBtn");
submitBtn = ()=>{
let value = text.value;
if(value == null){
alert("添加失败，不可以为空");
return ;
}
sessionStorage.setItem("book",value);
alert("添加成功");
}
search = () =>{
let item = sessionStorage.getItem("book");
if(item === null){
alert("暂无书本，请添加")
return ;
}
book.value = item;
deleteBtn.style.display = "";
}
Delte = ()=>{
let b = confirm("情定删除吗？");
if(b){
sessionStorage.removeItem("book");
alert("删除成功");
book.value = "";
deleteBtn.style.display = "none";
}
}
</script>
</html>
9.6.Web SQL
在我们的Web客户端也可以使用SQL来操作数据库,Web SQL的兼容性并不是特别理想，仅chrome ，safari，opera 10.5+等浏览器支持。归咎其原因，主要是因为 Web SQL Database API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范，它引入了一套使用 SQL 操作客户端数据库的 API。其规范已经被停止更新了，所以大多数浏览器并不支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web SQL</title>
</head>
<body>
</body>
<script>
//创建一个数据库
//openDatabase（数据库名称，版本号，描述，大小，单位是kb，回到函数，可不写）
const dataBase = openDatabase("myDB","1.0","测试数据库",1024*1024,function (){});
//创建数据表
dataBase.readTransaction(function (tx){
tx.executeSql("create table if not exists logs(id unique ,log)");
});
//插入数据
let id = 2;
let name = "LinVV";
dataBase.readTransaction(function (tx){
tx.executeSql("insert into logs(id,log) values (1,'stukk')");
//动态插入
tx.executeSql("insert into logs(id,log) values (?,?)",[id,name]);
});
// 接下来是查询数据库
dataBase.transaction((tx)=>{
tx.executeSql("select * from logs",[],(tx,results)=>{
let len = results.rows.length;
let msg = "查询到的条数:" + len ;
console.log(msg);
console.log("所有查询到的数据如下：");
for(let res of results){
console.log(res.id + "：" + res.log);
}
})
})
//删除操作
dataBase.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
// 更新操作
dataBase.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cn\' WHERE id=2');
});
</script>
</html>使用DataBase现在貌似被浏览器禁止了，所以可以尝试使用下IndexedDB
9.7. IndexedDB
let db;
let objectStore;
let databaseName = "testIDB"
let version = 1
let request = window.indexedDB.open(databaseName, version);
request.onerror = function (event) {}
request.onsuccess = function (event) {
db = request.result//可以拿到数据库对象
console.log(db);
// add();
// getByKey(db,'person',2);
cursorGetData(db,"person");
}
//如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded
request.onupgradeneeded = function (event) {
db = event.target.result;
if (!db.objectStoreNames.contains('person')) {//判断是否存在
objectStore = db.createObjectStore('person', { keyPath: 'id' });
}
//新建索引，参数索引名称、索引所在的属性、配置对象
let idbIndex = objectStore.createIndex('email', 'email', { unique: true });
}
function add() { //添加数据
let request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 2, name: '张四', age: 24, email: '20jkwu1@stu.edu.cn' });
request.onsuccess = function (event) {
console.log('数据写入成功');
};
request.onerror = function (event) {
console.log('数据写入失败');
}
}
function getByKey(db,storeName,key){ //通过主键获取 --- id 你
let transaction = db.transaction([storeName]); //事务
let store = transaction.objectStore(storeName);
let req = store.get(key);
req.onerror = function (event){
console.log("事务失败");
}
req.onsuccess = function (event){
console.log(req.result)
console.log("查询成功，结果为：" + req.result);
}
}
function cursorGetData(db, storeName){
let list = [];
let store = db.transaction(storeName, "readwrite").objectStore(storeName);
let req = store.openCursor(); //指针对象
req.onsuccess = function (e) {
let cursor = e.target.result;
if (cursor) {
list.push(cursor.value);
cursor.continue(); //遍历存储对象中的数据
} else {
console.log("游标读取的数据：");
console.log(list);
}
}
}
/**
* 通过索引读取数据
* @param {object} db 数据库实例
* @param {string} storeName 仓库名称
* @param {string} indexName 索引名称
* @param {string} indexValue 索引值
*/
function getDataByIndex(db, storeName, indexName, indexValue) {
let store = db.transaction(storeName, "readwrite").objectStore(storeName);
let request = store.index(indexName).get(indexValue);
request.onerror = function () {
console.log("事务失败");
};
request.onsuccess = function (e) {
let result = e.target.result;
console.log("索引查询结果：", result);
};
}
//更新则是put和delete()方法 db.transaction(storeName, "readwrite").objectStore(storeName).put().....
10.总结
总结就是，html主要还是搭建了我们项目的页面的骨架，至于这个骨架要变成什么颜色，什么形状，需要由我们接下来的CSS和Javascript来决定的！
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
