领先半年不是吹的，180天后荣耀V10依旧没被超越
荣耀V10发布已经半年，在发布的时候，就曾经号称要领先行业半年，现在180天已经过去了，手机市场也涌现了不少的旗舰手机，但真的出现了强劲的超越者了么？目前看似乎也并没有。而最近，荣耀一直吊足众人胃口的的“很吓人的技术“即将在荣耀新机上发布，这个技术同样未来可能会在荣耀V10上进行升级，如果这个技术真的像传闻中那么颠覆，荣耀V10甚至有可能会拉大领先的优势。
AI定位的成功之作
从最近一年手机行业的发展来看，其实进入了一个分水岭，同质化的现状正在被打破，而有突破性的技术开始进入行业开始引发大厂竞争的差异化。比如从全面屏这个大热门来说，就有上下窄边框、刘海屏和摄像头下置以及美人尖多个版本的解决方案，还有的厂商则在屏下指纹方面进行发力，打造体验更为完美的全面屏手机。不过这些竞争的方向都更多的是基于供应链端的技术进步，而在独创性技术方面，因为受制于外来屏幕、CPU的制约，其实还是缺少很多突破。不过华为的技术优势还是带来了更大的差异化机会，那就是麒麟970的正式发布，让CPU进入了人工智能时代，而荣耀V10就是荣耀的首款970旗舰机型，这也最终成为了荣耀V10的核心优势所在。
荣耀对于人工智能的押宝还是非常有远见的，在大家都盯着全面屏这种工艺升级的时候，荣耀还是把重心放到了技术迭代上。早在麒麟970诞生之间，华为就研发了一款独立型号的magic手机来进行人工智能的尝试，并获得了不错的反馈，为后续的发展也打下了坚实的基础。荣耀V10就是人工智能手机的代表之作，独立AI处理单元、配套AI操作系统、开放的底层AI技术实力和能力使其在人工智能方面表现非常优秀，整个机器表现非常不错。而且在设计和色彩创造上，荣耀V10也可圈可点，比如把指纹识别放到了前面，更多的去考虑用户的习惯和体验，而不是像行业主流那样强行全面屏创新就把指纹放后面去了，非常有自己的坚持。这款手机整体还是非常均衡，几乎找不到短板。
同行的衬托
在这期间，骁龙也发布了自己的新品旗舰芯片骁龙845。也许是因为合作伙伴适配的考虑，骁龙在人工智能这个大方向上的表现还是比较保守的，并没有设置独立的人工智能单元，而是只能通过NPE(Neural Processing Engine, 骁龙神经处理引擎)来调度已有的CPU、GPU和DSP资源来实现AI性能，但骁龙原有的CPU/GPU/DSP等处理单元并不是专门为AI所打造的，共享使用其实等于分散了芯片的算力，在满负荷运转的情况下，这种调度就变得没有意义，而在平时的使用中，则也会影响计算能力的全部释放。而反观麒麟970因为独立设计了NPU（神经网络处理单元），使得AI性能相比较CPU获得了25倍的性能提升和50倍的能效提升，在很多场景中，都减轻了CPU的运算能力，大大提升了手机的整体水平。
所以采用骁龙845的旗舰手机截止到目前并未表现出过人素质，在AI方面的专业缺失成为最大短板，而在运算方面的提升，事实上对于用户体验的影响并没有那么大。像有些比较专业的游戏手机，甚至直接采用了骁龙835来作为主力芯片，既能保证运算的速度和游戏的效果，又非常稳定和成熟，不会出现太多的兼容问题。这也说明了845相比较835而言，虽然有提升，但并不够颠覆，而在目前的游戏环境下，性能也是溢出的，使用高价845的优势也并不明显。而其他芯片目前不是比较小众，就是表现也并没有很出色的地方，在用户感知比较强烈的人工智能方面，荣耀V10确实还是保持了领先的地位。
更多场景落地拉大优势
手机在人工智能方面的突破方向已经非常确定，而荣耀在这方面的数据积累已经领先同行好几年，从这个角度说，数据带来的智能优势会累积成为真正的优势，产品体验会不断的提升。目前在功能上，麒麟 970 已经适配例如 AI 慧眼拍照、AI 随行翻译、AI语音助手等功能，在拍照、视频、VR方面带来更好的AI体验，也让华为用户逐渐熟悉了人工智能的体验，越用越顺手之余，就很难再去换其他手机了。值得一提的是，华为把麒麟 970 作为移动计算平台开放出去，让众多开发者快速把应用接入华为的AI平台，已经有很多主流软件都已加入华为开发者联盟，这也使得荣耀的人工智能生态在不断完善，同时也领先了同行很多身位。全行业在芯片层面进入人工智能时代，可能要等骁龙的下一次迭代了。
手机体验终究还是不同于电脑，目前大部分应用其实对芯片运算能力的要求已经可以被完全满足了，甚至中档芯片都有很好的表现，所以垂直堆料的研发方向可能还是有问题的，纵向扩张人工智能的运算能力恐怕才会真正带来用户体验上的提升。这一个小小方向上的差异，自然也就带来了手机体验上的不同。荣耀V10之所以保持了半年的领先，其核心原因也是在AI上做到了自己体验的极致，而手机领域的其他竞品因为芯片侧重的原因多少有些方向上的迷失，而这种情况，我想还是会保持一段时间的。华为系在手机上的研发方向选择还是非常准确和有效的，比如华为P20pro就成功的引发了业内的轰动，而这次荣耀发布的吓死人技术，也是同一级别的技术突破，这些都体现出了一种软硬一体化的进化思路，对于很多用第三方芯片的厂商来说，还是很难做到的。
荣耀V10现在的价格也只有两千出头，从外观到人工智能芯片到前置指纹到AI双摄等方面来看，都是一个性价比极高的选择，如果再加上价格这个优势，我想荣耀V10的领先还会保持下去，这对于很多手机用户来说，无疑是一个好消息。
万能的大熊
微博17连续三年获得科技领域、电商领域十大最具影响力大V
蓝鲸自媒体联盟2017年年度科技大V
公关品牌专家：曾负责360手机助手、360手机游戏、360随身wifi、360儿童手表、360行车记录仪的品牌营销，均为行业第一品牌。
畅销书作者：中信出版社合作出版畅销书《格局逆袭》，销售近10万册。
微营销第一社群大熊会创始人：2013年创建大熊会，位列中国社群影响力排行榜前五，是国内最大的致力于研究和引领微营销发展潮流的社会化营销社群组织，成员已超七千人。
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
今日搜狐热点更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
举报视频：
举报原因(必填)：
请说明举报原因(300字以内)：
请输入您的反馈
举报理由需要输入300字以内
感谢您的反馈～
请勿重复举报~
请刷新重试~
收藏成功，可进入
查看所有收藏列表
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
教你用手机制作一个九宫格的头像，朋友看到都会羡慕不已
正在检测客户端...
您尚未安装客户端，正在为您下载...安装完成后点击按钮即可下载
30秒后自动关闭
教你用手机制作一个九宫格的头像，朋友看到都会羡慕不已">教你用手机制作一个九宫格的头像，朋友看到都会羡慕不已
请选择打赏金额：
播放量12.7万
播放量数据：快去看看谁在和你一起看视频吧~
更多数据：
热门短视频推荐
Copyright (C) 2018 & All Rights Reserved
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
正在为您下载爱奇艺客户端安装后即可快速下载海量视频
正在为您下载爱奇艺客户端安装后即可免费观看1080P视频
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
后才可以领取积分哦~
每观看视频30分钟
+{{data.viewScore}}分
{{data.viewCount}}/3
{{if data.viewCount && data.viewCount != "0" && data.viewCount != "1" && data.viewCount != "2" }}
访问泡泡首页
+{{data.rewardScore}}分
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}1{{else}}0{{/if}}/1
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}
+{{data.signScore}}分
{{data.signCount}}/1
{{if data.signCount && data.signCount != 0}}
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制更多频道内容在这里查看
爱奇艺用户将能永久保存播放记录
过滤短视频
暂无长视频（电视剧、纪录片、动漫、综艺、电影）播放记录，
按住视频可进行拖动
&正在加载...
举报视频：
举报原因(必填)：
请说明举报原因(300字以内)：
请输入您的反馈
举报理由需要输入300字以内
感谢您的反馈～
请勿重复举报~
请刷新重试~
收藏成功，可进入
查看所有收藏列表
当前浏览器仅支持手动复制代码
视频地址：
flash地址：
html代码：
通用代码：
通用代码可同时支持电脑和移动设备的分享播放
用爱奇艺APP或微信扫一扫，在手机上继续观看
当前播放时间：
一键下载至手机
限爱奇艺安卓6.0以上版本
使用微信扫一扫，扫描左侧二维码，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
设备搜寻中...
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
连接失败！
请确保您要连接的设备（仅限安卓）登录了同一爱奇艺账号 且安装并开启不低于V6.0以上版本的爱奇艺客户端
部安卓（Android）设备，请点击进行选择
请您在手机端下载爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
其他安装方式：手机浏览器输入短链接http://71.am/udn
下载安装包到本机：
爱奇艺云推送
请您在手机端登录爱奇艺移动APP（仅支持安卓客户端）
使用微信扫一扫，下载爱奇艺移动APP
180秒后更新
打开爱奇艺移动APP，点击“我的-扫一扫”，扫描左侧二维码进行登录
没有安装爱奇艺视频最新客户端？
神奇的创意显示器，能让笔记本变成双屏幕，你想试试吗？
正在检测客户端...
您尚未安装客户端，正在为您下载...安装完成后点击按钮即可下载
30秒后自动关闭
神奇的创意显示器，能让笔记本变成双屏幕，你想试试吗？">神奇的创意显示器，能让笔记本变成双屏幕，你想试试吗？
请选择打赏金额：
播放量12.7万
播放量数据：快去看看谁在和你一起看视频吧~
更多数据：
热门短视频推荐
Copyright (C) 2018 & All Rights Reserved
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制
正在为您下载爱奇艺客户端安装后即可快速下载海量视频
正在为您下载爱奇艺客户端安装后即可免费观看1080P视频
&li data-elem="tabtitle" data-seq="{{seq}}"& &a href="javascript:void(0);"& &span>{{start}}-{{end}}&/span& &/a& &/li&
&li data-downloadSelect-elem="item" data-downloadSelect-selected="false" data-downloadSelect-tvid="{{tvid}}"& &a href="javascript:void(0);"&{{pd}}&/a&
选择您要下载的《
后才可以领取积分哦~
每观看视频30分钟
+{{data.viewScore}}分
{{data.viewCount}}/3
{{if data.viewCount && data.viewCount != "0" && data.viewCount != "1" && data.viewCount != "2" }}
访问泡泡首页
+{{data.rewardScore}}分
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}1{{else}}0{{/if}}/1
{{if data.rewardCount && data.rewardCount != 0 && data.getRewardDayCount != 0}}
+{{data.signScore}}分
{{data.signCount}}/1
{{if data.signCount && data.signCount != 0}}
色情低俗内容
血腥暴力内容
广告或欺诈内容
侵犯了我的权力
还可以输入
您使用浏览器不支持直接复制的功能，建议您使用Ctrl+C或右键全选进行地址复制HTML5问世以后，前端加入了一个重要的功能，便是本地存储，本地存储可分为4类：
Local Storage：总的存储量有所限制，并不能提供真正的检索API，数据的生命期比窗口或浏览器的生命期长，数据可被同源的每个窗口或者标签页共享，兼容性很好，使用最多的存储方式。
Session Storage：只要浏览器窗口不关闭就会一直存在，不应该把真正有价值的东西放在里面，数据会保存到存储它的窗口或者标签页关闭时，数据只在构建他们的窗口或者标签页可见
Indexed Database：在Indexed Database中，objectstore代替了传统的表的概念，每个objectstore相当于一个key和value的集合，IndexedDB并不像传统的如SQL Server那样需要额外安装。Indexed是存在于浏览器端的并且能被用户所访问控制。是保存不敏感用户数据的最佳方案，也可以用于创建本地应用，NOSql。
Web SQL Database：实际上未包含在HTML5规范中。和Indexed Database都是在客户端存储大量结构化数据的解决方案。web sql database实现了传统的基于sql语句的数据库操作，而indexed database实现了nosql的存储方式，关系数据库。
Indexed Database通过直接执行同步或者异步的函数调用来检索树状的对象存储引擎。索引数据库API避开了查询字符串，它使用的底层API支持将值直接存储在javascript对象中。存储在数据库中的值可以通过键或使用索引获取到，并且可以使用同步或异步方式访问API。索引数据库也限定在同源范围内。
一、HTML4客户端存储
B/S架构的应用大量的信息存储在服务器端，客户端通过请求响应的方式从服务器获得数据，这样集中存储也会给服务器带来相应的压力，有些数据可以直接存储在客户端，传统的Web技术中会使用Cookie，但Cookie有一些缺点，为了说明这个缺点我们先看看当提交表单时会有那些信息会被浏览器收集后发送到服务器。
Cookies 客户端 独享 4K
Session&服务端 独享 少量
Application 服务端 共享 小量
1.1、提交表单发送到服务器的信息
1)、带name的可用表单元素
3)、客户端请求头部信息
4)、cookie
&%@ page language="java" contentType="text/ charset=utf-8"
pageEncoding="utf-8"%&
//定义一个cookie对象
Cookie cookie=new
Cookie("color", "blue");
//设置过期时间为365小时,以秒为单位
cookie.setMaxAge(60*60*365);
//添加cookie
response.addCookie(cookie);
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&title&提交表单测试&/title&
&form action="target.do?id=1" method="post"&
&h2&提交表单测试&/h2&
名称：&input type="text" name="txtName" id="txtName1" /&
价格：&input type="text" name="txtPrice" id="txtPrice1" value="888" readonly="readonly"/&
数量：&input type="text" name="txtAmount" id="txtAmount1" value="999"
disabled="disabled"/&
&input type="hidden" id="key" value="123445"&
&input type="submit" value="提交" /&
运行结果：
服务器在响应头部中声明要求客户端浏览器指定设置cookie color=blue的工作，且指定了过期时间，会将cookie信息记录在本地，查看结果如下：
当提交信息给服务器时cookie将收集后返回服务器，同时也会将url、带name可用的表单及请求头部信息如user-agent等，结果如下：
1.2、客户端本地存储概要
顾名思义客户端本地存储就是将信息存储在客户端电脑上，cookie就是一种典型的传统客户端存储，长期以来本地存储能力一直是桌面应用区别于Web应用的一个主要优势，作为Web应用程序而言，新一代的HTML标准对数据的本地存储提出了更高的要求。传统的Web数据存储方式一直来使用的是Cookie,但Cookie有以下缺陷:
a)、cookie会被附加在每个HTTP请求中，所以无形中增加了流量。
b)、由于在HTTP请求中的cookie是明文传递的，所以安全性成问题。
c)、Cookie的大小限制在4 KB左右,容量达不到要求。
HTML5中的Web Storage，称为Web本地存储，在Web客户端储存数据的功能,用键值对的形式保存数据，曾经属于HTML5的规范，目前已经被独立出来形成单独的规范体系。本地存储优势:
a)、统一的标准，兼容性高(IE8、各大浏览器支持)
b)、数据存储量大
c)、无需安装插件
d)、减少网络流量
e)、更加适合移动端
HTML5 提供了四种在客户端存储数据的新方法，即localStorage 、sessionStorage、globalStorage、Web&Sql Database。 前面三个适用于存储较少的数据,而Web Sql Database适用于存储大型的，复杂的数据，我习惯把前面的三个称之为小存储。&IE8、Firefox3.6、Chrome5、Safari4、Opera10，事实证明各个浏览器在API方面的实现基本上一致，存在一定的兼容性问题，但不影响正常使用。
在chrome浏览器中可以使用开发者工具查看到各种不同的本地存储方式，如下图所示：
Web SQL Database 和 Indexed Database 都是在客户端存储大量结构化数据的解决方案。Web SQL Database 实现了传统的基于 SQL 语句的数据库操作，而 Indexed Database 实现了 NoSQL 的存储方式。
Web Storage 这种用于存储 (key, value)，一般两者都是字符串；
IndexDB 是增强型的 Web Storage，也是存储 (key, value);
Web SQL 则是 SQLite，一个完整的关系型数据库，可以执行 SQL。
WebSQL是SQLite在浏览器中的实现，所以它是一种关系型数据库。由于W3C对其规范定义不够理想，各家浏览器有各自实现，有浏览器兼容问题；
IndexDB是一种key-value类型的非关系数据库（NoSQL)
二、localStorage
localStorage：将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&localStorage 本地存储&/title&
&h2&localStorage 本地存储&/h2&
&button onclick="add_click()"&添加&/button&
&script type="text/javascript"&
add_click()
//向本地存储中添加一个名为name,值为"手机"的key-value对象
localStorage.setItem("name","手机");
localStorage["price"]=999.5;
localStorage.amount=1788;
运行结果：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&localStorage 本地存储&/title&
&h2&localStorage 本地存储&/h2&
&button onclick="add_click()"&添加&/button&
&button onclick="get_click()"&取值&/button&
&h3 id="msg"&&/h3&
&a href="d02.html"&d02.html&/a&
&script type="text/javascript"&
var msg=document.getElementById("msg");
add_click()
//向本地存储中添加一个名为name,值为"手机"的key-value对象
localStorage.setItem("name","手机");
localStorage["price"]=999.5;
localStorage.amount=1788;
function get_click()
msg.innerHTML+=localStorage.getItem("name")+"&br/&";
msg.innerHTML+=localStorage["price"]+"&br/&";
msg.innerHTML+=localStorage.amount+"&br/&";
&运行结果：
function update_click()
//如果不存在就添加，如果存在就修改
localStorage.setItem("name","iPhone 8 plus手机");
//修改办法2
localStorage["price"]=899.5;
//修改办法3
localStorage.amount=100;
&运行结果：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&localStorage 本地存储&/title&
&h2&localStorage 本地存储&/h2&
&button onclick="add_click()"&添加&/button&
&button onclick="get_click()"&取值&/button&
&button onclick="update_click()"&修改&/button&
&button onclick="delete_click()"&删除&/button&
&h3 id="msg"&&/h3&
&a href="d02.html"&d02.html&/a&
&script type="text/javascript"&
var msg=document.getElementById("msg");
add_click()
//向本地存储中添加一个名为name,值为"手机"的key-value对象
localStorage.setItem("name","手机");
//添加办法2
localStorage["price"]=999.5;
//添加办法3
localStorage.amount=1788;
function get_click()
msg.innerHTML+=localStorage.getItem("name")+"&br/&";
msg.innerHTML+=localStorage["price"]+"&br/&";
msg.innerHTML+=localStorage.amount+"&br/&";
function update_click()
//如果不存在就添加，如果存在就修改
localStorage.setItem("name","iPhone 8 plus手机");
//修改办法2
localStorage["price"]=899.5;
//修改办法3
localStorage.amount=100;
function delete_click()
//根据键删除
//localStorage.removeItem("price");
//删除所有
localStorage.clear();
&运行结果：
2.5、跨页面与跨域
当关闭浏览器，下次再打开时，值仍然存在。可以跨页面，不能跨域。我们在d01页面中添加了值，在d02页面中仍然可以访问，在整个同域下都可以访问。
2.6、存储位置与SQLite
localStorage与cookie不一样，它存储在一个数据库文件中，默认位置在：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases\http_localhost_*
C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Profile 1\Local Storage
Administrator是当前登录用户名
使用SQLite数据库管理工具，打开后看到的结果，这里以taobao存储客户端的localStorage为例：
提示：SQLite，是一款轻型的免费开源的数据库，是遵守ACID的关系型数据库管理系统，它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的，而且目前已经在很多嵌入式产品中使用了它，它占用资源非常的低，在嵌入式设备中，可能只需要几百K的内存就够了。它能够支持Windows/Linux/Unix等等主流的操作系统，同时能够跟很多程序语言相结合，比如 Tcl、C#、PHP、Java等，还有ODBC接口，同样比起Mysql、PostgreSQL这两款开源的世界著名数据库管理系统来讲，它的处理速度比他们都快。SQLite第一个Alpha版本诞生于2000年5月。 至2015年已经有15个年头，SQLite也迎来了一个版本 SQLite 3已经发布。
SQLiteSpy管理工具下载：
2.7、用途、练习与兼容性
所有需要将少量（不超过4M）数据存储在客户端的需求都适用，如密码，用户偏好（profile）等
登录成功后记录用户访问次数。
在IE8中测试通过
Firefox测试通过
三、sessionStorage
将数据临时保存在客户端session对象中。session对象就是会话对象，session中存储的数据独立于每个客户，该数据会随着浏览器的关闭而消失。
sessionStorage的操作api与localStorage基本一样，在不手动清除的情况下localStorage永久保存，而sessionStorage只是临时暂存。
3.1、sessionStorage使用
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&sessionStorage 本地存储&/title&
&h2&sessionStorage 本地存储&/h2&
&button onclick="add_click()"&添加&/button&
&button onclick="get_click()"&取值&/button&
&button onclick="update_click()"&修改&/button&
&button onclick="delete_click()"&删除&/button&
&h3 id="msg"&&/h3&
&a href="d04.html"&d04.html&/a&
&script type="text/javascript"&
var msg=document.getElementById("msg");
add_click()
//向本地存储中添加一个名为name,值为"手机"的key-value对象
sessionStorage.setItem("name","手机");
//添加办法2
sessionStorage["price"]=999.5;
//添加办法3
sessionStorage.amount=1788;
function get_click()
msg.innerHTML+=sessionStorage.getItem("name")+"&br/&";
msg.innerHTML+=sessionStorage["price"]+"&br/&";
msg.innerHTML+=sessionStorage.amount+"&br/&";
function update_click()
//如果不存在就添加，如果存在就修改
sessionStorage.setItem("name","iPhone 8 plus手机");
//修改办法2
sessionStorage["price"]=899.5;
//修改办法3
sessionStorage.amount=100;
function delete_click()
//根据键删除
//sessionStorage.removeItem("price");
//删除所有
sessionStorage.clear();
运行结果：
可以实现在页面间传值，比如可以临时存储用户信息。
3.2、Web本地存储事件监听&
当程序修改localStorage与sessionStorage时将触发全局事件。
当setItem(),removeItem()或者clear() 方法被调用，并且数据真的发生了改变时，就会触发storage事件,如果需要进行监听数据处理，通过以下方法: window.addEventListener(event,handleEvent, capture) event:设置成storage handleEvent:事件处理函数 capture:事件处理顺序，一般设置成false,表示采用冒泡方式处理
handleEvent处理事件的函数会接收到一个StorageEvent对象，该对象有以下属性:key:被修改的键。oldValue:修改前的值（如果是增加新的键值，则该属性为null）newValue:修改后的值（如果是删除键值，则该属性为null）url/uri:触发当前存储事件的页面的url
注意：storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本事也会触发storage事件）
&修改d02页面，监听值的变化。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&获得localStorage的值&/title&
&script type="text/javascript"&
console.log(localStorage.price);
window.addEventListener("storage",function(obj){
alert(obj.oldValue+","+obj.newValue+","+obj.url);
运行结果如下：
3.3、cookie、sessionStorage、localStorage比较
四、Web SQL Database&
Web SQL Database 引入了一套使用 SQL 来操纵客户端数据库（client-side database）的 API，这些 API 是异步的（asynchronous），规范中所使用的 SQL 语言为 SQLite。Web SQL Database API 实际上未包含在 HTML 5 规范之中，它是一个独立的规范，它引入了一套使用 SQL 操作客户端数据库的 API，这些 API 有同步的，也有异步的， 同步版本的 API 只在工作线程（Worker Threads）上有用，由于并不是所有的浏览器都支持工作线程，一般情况下，都会使用异步 API。兼容情况如下：
Web SQL Database可以让开发人员使用SQL语句操作客户端浏览器中嵌入的SQLite数据库 ，给开发人员提供了方便。对于简单的数据，使用sessionStorage和localStorage能够很好地完成存取，但是对于处理复杂的关系型数据，它就力不从心了。这也是 HTML 5 的&Web SQLDatabase&API 接口的应用所在。我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库
三个核心方法openDatabase：这个方法使用现有数据库或创建新数据库创建数据库对象。transaction：这个方法允许我们根据情况控制事务提交或回滚。executeSql：这个方法用于执行真实的SQL查询。
4.1、创建数据库
使用openDatabase创建或打开数据库，如果存在就打开，如果不存在就创建，语法如下：
openDatabase(a,b,c,d,e);
a).数据库名称。b).版本号 目前为1.0c).对数据库的描述d).设置数据的大小，以Byte为单位e).回调函数(可省略）
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
db=openDatabase("products",1.0,"产品数据库",1024*1024*3,function(){
log("创建或打开数据库完成");
//显示消息
function log(info){
$("#msg")[0].innerHTML+=info+"&br/&";
运行结果：
4.2、创建表
执行所有的SQL语句都将使用到transaction、executeSql两个方法，基本语法格式如下：
数据库对象.transaction(function(tx) {
tx.executeSql(
"要执行的sql", [参数],
function(tx, result) {
alert('成功时的回调方法');
function(tx, error) {
alert('失败时的回调方法' + error.message);
页面脚本如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&button onclick="createTable()"&创建表&/button&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//创建或打开名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
log("创建数据库完成");
function createTable() {
db.transaction(function(tx) {
tx.executeSql(
"create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
function(tx, result) {
log('创建表成功');
function(tx, error) {
log('创建表失败' + error.message);
//显示消息
function log(info) {
$("#msg")[0].innerHTML += info + "&br/&";
运行结果：
当创建成功时，可以发现在出现了两个表，其中名为sqlite_sequence为自动增长用的序列。
4.3、添加数据
页面脚本如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&button onclick="createTable()"&创建表&/button&
&fieldset&
&legend&商品信息&/legend&
&label for="name"&名称：&/label&
&input type="text" id="name" value="" /&
&label for="price"&价格：&/label&
&input type="text" id="price" value="" /&
&button onclick="insert()"&添加&/button&
&/fieldset&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
log("创建或打开数据库完成");
function createTable() {
db.transaction(function(tx) {
tx.executeSql(
"create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
function(tx, result) {
log('创建表成功');
function(tx, error) {
log('创建表失败' + error.message);
//插入数据
function insert() {
db.transaction(function(tx) {
tx.executeSql(
"insert into goods(name,price) values(?,?)",
[$("#name").val(),$("#price").val()],
function(tx, result) {
log('添加数据成功');
function(tx, error) {
log('添加数据失败' + error.message);
//显示消息
function log(info) {
$("#msg")[0].innerHTML += info + "&br/&";
运行结果：
4.4、展示数据
页面脚本如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&button onclick="createTable()"&创建表&/button&
&table border="1" width="80%" id="tabGoods"&
&tr&&th&编号&/th&&th&名称&/th&&th&价格&/th&&th&删除&/th&&/tr&
&fieldset&
&legend&商品信息&/legend&
&label for="name"&名称：&/label&
&input type="text" id="name" value="" /&
&label for="price"&价格：&/label&
&input type="text" id="price" value="" /&
&button onclick="insert()"&添加&/button&
&/fieldset&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
log("创建或打开数据库完成");
//展示，加载数据
function select()
//将表格中tr索引大于0的元素删除
$("#tabGoods tr:gt(0)").remove();
db.transaction(function(tx) {
tx.executeSql(
"select id,name,price from goods", [],
function(tx, result) {
for (var i=0;i&result.rows.i++) {
var tr=$("&tr/&");
$("&td/&").text(result.rows.item(i)["id"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["name"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["price"]).appendTo(tr);
var del=$("&a href='#' onclick='del("+result.rows.item(i)["id"]+")' &删除&/a&")
$("&td/&").append(del).appendTo(tr);
tr.appendTo("#tabGoods");
function(tx, error) {
log('创建表失败' + error.message);
function createTable() {
db.transaction(function(tx) {
tx.executeSql(
"create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
function(tx, result) {
log('创建表成功');
function(tx, error) {
log('创建表失败' + error.message);
//插入数据
function insert() {
db.transaction(function(tx) {
tx.executeSql(
"insert into goods(name,price) values(?,?)",
[$("#name").val(),$("#price").val()],
function(tx, result) {
log('添加数据成功');
function(tx, error) {
log('添加数据失败' + error.message);
//显示消息
function log(info) {
$("#msg")[0].innerHTML += info + "&br/&";
运行结果如下：
4.5、编辑数据
页面脚本如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&button onclick="createTable()"&创建表&/button&
&table border="1" width="80%" id="tabGoods"&
&th&编号&/th&
&th&名称&/th&
&th&价格&/th&
&th&删除&/th&
&fieldset&
&legend&商品信息&/legend&
&label for="name"&名称：&/label&
&input type="text" id="name" value="" /&
&label for="price"&价格：&/label&
&input type="text" id="price" value="" /&
&input type="hidden" id="goodsId" /&
&button onclick="insert()"&添加&/button&
&button onclick="update()"&更新&/button&
&/fieldset&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
log("创建或打开数据库完成");
//展示，加载数据
function select() {
//将表格中tr索引大于0的元素删除
$("#tabGoods tr:gt(0)").remove();
db.transaction(function(tx) {
tx.executeSql(
"select id,name,price from goods", [],
function(tx, result) {
for(var i = 0; i & result.rows. i++) {
var tr = $("&tr/&");
$("&td/&").text(result.rows.item(i)["id"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["name"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["price"]).appendTo(tr);
var del = $("&a href='#' onclick='del(" + result.rows.item(i)["id"] + ",this)' &删除 | &/a&")
var edit = $("&a href='#' onclick='edit(" + result.rows.item(i)["id"] + ",this)' &修改&/a&")
$("&td/&").append(del).append(edit).appendTo(tr);
tr.appendTo("#tabGoods");
function(tx, error) {
log('创建表失败' + error.message);
function createTable() {
db.transaction(function(tx) {
tx.executeSql(
"create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
function(tx, result) {
log('创建表成功');
function(tx, error) {
log('创建表失败' + error.message);
//插入数据
function insert() {
db.transaction(function(tx) {
tx.executeSql(
"insert into goods(name,price) values(?,?)", [$("#name").val(), $("#price").val()],
function(tx, result) {
log('添加数据成功');
function(tx, error) {
log('添加数据失败' + error.message);
function del(id, link) {
db.transaction(function(tx) {
tx.executeSql(
"delete from goods where id=?", [id],
function(tx, result) {
log('删除成功');
//查找a标签最近的一个tr父元素，移除
$(link).closest("tr").remove();
function(tx, error) {
log('删除失败' + error.message);
function edit(id) {
db.transaction(function(tx) {
tx.executeSql(
"select id,name,price from goods where id=?", [id],
function(tx, result) {
$("#name").val(result.rows.item(0)["name"]);
$("#price").val(result.rows.item(0)["price"]);
$("#goodsId").val(result.rows.item(0)["id"]);
log("修改后请保存");
function(tx, error) {
log('编辑失败' + error.message);
function update() {
if($("#goodsId").val()) {
db.transaction(function(tx) {
tx.executeSql(
"update goods set name=?,price=?
where id=?", [$("#name").val(), $("#price").val(), $("#goodsId").val()],
function(tx, result) {
log('更新成功');
$("#goodsId").val("");
function(tx, error) {
log('更新失败' + error.message);
log("请选择要更新的记录 ");
//显示消息
function log(info) {
$("#msg")[0].innerHTML += info + "&br/&";
运行结果如下：
4.6、删除数据
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&button onclick="createTable()"&创建表&/button&
&table border="1" width="80%" id="tabGoods"&
&tr&&th&编号&/th&&th&名称&/th&&th&价格&/th&&th&删除&/th&&/tr&
&fieldset&
&legend&商品信息&/legend&
&label for="name"&名称：&/label&
&input type="text" id="name" value="" /&
&label for="price"&价格：&/label&
&input type="text" id="price" value="" /&
&button onclick="insert()"&添加&/button&
&/fieldset&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
var db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
log("创建或打开数据库完成");
//展示，加载数据
function select()
//将表格中tr索引大于0的元素删除
$("#tabGoods tr:gt(0)").remove();
db.transaction(function(tx) {
tx.executeSql(
"select id,name,price from goods", [],
function(tx, result) {
for (var i=0;i&result.rows.i++) {
var tr=$("&tr/&");
$("&td/&").text(result.rows.item(i)["id"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["name"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["price"]).appendTo(tr);
var del=$("&a href='#' onclick='del("+result.rows.item(i)["id"]+",this)' &删除&/a&")
$("&td/&").append(del).appendTo(tr);
tr.appendTo("#tabGoods");
function(tx, error) {
log('创建表失败' + error.message);
function createTable() {
db.transaction(function(tx) {
tx.executeSql(
"create table if not exists goods(id integer primary key autoincrement,name text not null,price double)", [],
function(tx, result) {
log('创建表成功');
function(tx, error) {
log('创建表失败' + error.message);
//插入数据
function insert() {
db.transaction(function(tx) {
tx.executeSql(
"insert into goods(name,price) values(?,?)",
[$("#name").val(),$("#price").val()],
function(tx, result) {
log('添加数据成功');
function(tx, error) {
log('添加数据失败' + error.message);
function del(id,link) {
db.transaction(function(tx) {
tx.executeSql(
"delete from goods where id=?",
function(tx, result) {
log('删除成功');
//查找a标签最近的一个tr父元素，移除
$(link).closest("tr").remove();
function(tx, error) {
log('删除失败' + error.message);
//显示消息
function log(info) {
$("#msg")[0].innerHTML += info + "&br/&";
运行结果：
4.7、删除表
function dropTable() {
db.transaction(function(tx) {
tx.executeSql(
"drop table IF EXISTS goods", [],
function(tx, result) {
log('删除表成功');
function(tx, error) {
log('删除表失败' + error.message);
运行结果：
4.8、数据库位置
D:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\databases
4.9、封装JavaScript
前面的示例中javascript方法都直接暴露在window下，有可能与别的js冲突，可以进行简单封装。
简单对象封装示例：
var ticker={
add:function()
show:function()
alert(this.n);
ticker.add();
ticker.add();
ticker.show();
运行结果：2&
第一次封装后的代码，在整个window对象中只暴露dbApp对象，代码如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&button id="btnCreateTable"&创建表&/button&
&button id="btnDropTable"&删除表&/button&
&table border="1" width="80%" id="tabGoods"&
&th&编号&/th&
&th&名称&/th&
&th&价格&/th&
&th&删除&/th&
&fieldset&
&legend&商品信息&/legend&
&label for="name"&名称：&/label&
&input type="text" id="name" value="" /&
&label for="price"&价格：&/label&
&input type="text" id="price" value="" /&
&input type="hidden" id="goodsId" /&
&button id="btnInsert"&添加&/button&
&button id="btnUpdate"&更新&/button&
&/fieldset&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//定义当前应用的对象
var dbApp={
//打开数据库
openDb:function()
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
this.log("创建或打开数据库完成");
init:function()
//打开或创建数据库
this.openDb();
//绑定事件
this.bindEvent();
//展示数据
this.select();
this.log("初始化完成");
//绑定事件
bindEvent:function()
//添加事件
$("#btnInsert").click(this.insert);
$("#btnUpdate").click(this.update);
$("#btnCreateTable").click(this.createTable);
$("#btnDropTable").click(this.dropTable);
//显示消息
log:function(info) {
$("#msg")[0].innerHTML += info + "&br/&";
createTable:function() {
this.db.transaction(function(tx) {
tx.executeSql(
"create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)", [],
function(tx, result) {
this.log('创建表成功');
function(tx, error) {
this.log('创建表失败' + error.message);
dropTable:function() {
this.db.transaction(function(tx) {
tx.executeSql(
"drop table IF EXISTS goods", [],
function(tx, result) {
this.log('删除表成功');
function(tx, error) {
this.log('删除表失败' + error.message);
//展示，加载数据
select:function() {
//将表格中tr索引大于0的元素删除
$("#tabGoods tr:gt(0)").remove();
this.db.transaction(function(tx) {
tx.executeSql(
"select id,name,price from goods", [],
function(tx, result) {
for(var i = 0; i & result.rows. i++) {
var tr = $("&tr/&");
$("&td/&").text(result.rows.item(i)["id"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["name"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["price"]).appendTo(tr);
var del = $("&a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' &删除 | &/a&")
var edit = $("&a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' &修改&/a&")
$("&td/&").append(del).append(edit).appendTo(tr);
tr.appendTo("#tabGoods");
function(tx, error) {
this.log('创建表失败' + error.message);
//插入数据
insert:function() {
//如果insert方法被绑定为事件，则this表示事件发生的对象
dbApp.db.transaction(function(tx) {
tx.executeSql(
"insert into goods(name,price) values(?,?)", [$("#name").val(), $("#price").val()],
function(tx, result) {
dbApp.log('添加数据成功');
dbApp.select();
function(tx, error) {
dbApp.log('添加数据失败' + error.message);
del:function(id, link) {
dbApp.db.transaction(function(tx) {
tx.executeSql(
"delete from goods where id=?", [id],
function(tx, result) {
dbApp.log('删除成功');
//查找a标签最近的一个tr父元素，移除
$(link).closest("tr").remove();
function(tx, error) {
dbApp.log('删除失败' + error.message);
edit:function(id) {
dbApp.db.transaction(function(tx) {
tx.executeSql(
"select id,name,price from goods where id=?", [id],
function(tx, result) {
$("#name").val(result.rows.item(0)["name"]);
$("#price").val(result.rows.item(0)["price"]);
$("#goodsId").val(result.rows.item(0)["id"]);
dbApp.log("修改后请保存");
function(tx, error) {
dbApp.log('编辑失败' + error.message);
update:function() {
if($("#goodsId").val()) {
dbApp.db.transaction(function(tx) {
tx.executeSql(
"update goods set name=?,price=?
where id=?", [$("#name").val(), $("#price").val(), $("#goodsId").val()],
function(tx, result) {
dbApp.log('更新成功');
dbApp.select();
$("#goodsId").val("");
function(tx, error) {
dbApp.log('更新失败' + error.message);
dbApp.log("请选择要更新的记录 ");
dbApp.init();
运行结果：
从上面的代码可以发现操作数据库，执行sql的方法存在大量的冗余，可以优化，优化后的代码如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&h2&Web SQL Database&/h2&
&button id="btnCreateTable"&创建表&/button&
&button id="btnDropTable"&删除表&/button&
&table border="1" width="80%" id="tabGoods"&
&th&编号&/th&
&th&名称&/th&
&th&价格&/th&
&th&删除&/th&
&fieldset&
&legend&商品信息&/legend&
&label for="name"&名称：&/label&
&input type="text" id="name" value="" /&
&label for="price"&价格：&/label&
&input type="text" id="price" value="" /&
&input type="hidden" id="goodsId" /&
&button id="btnInsert"&添加&/button&
&button id="btnUpdate"&更新&/button&
&/fieldset&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//定义当前应用的对象
var dbApp={
//打开数据库
openDb:function()
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
this.log("创建或打开数据库完成");
init:function()
//打开或创建数据库
this.openDb();
//绑定事件
this.bindEvent();
//展示数据
this.select();
this.log("初始化完成");
//绑定事件
bindEvent:function()
//添加事件
$("#btnInsert").click(this.insert);
$("#btnUpdate").click(this.update);
$("#btnCreateTable").click(this.createTable);
$("#btnDropTable").click(this.dropTable);
//显示消息
log:function(info) {
$("#msg")[0].innerHTML += info + "&br/&";
//执行sql的通用方法 result.rowsAffected 影响行数
//callback执行成功时的回调方法
exeSql:function(sql,title,param,callback) {
title=title||"操作";
this.db.transaction(function(tx) {
tx.executeSql(
sql, param||[],
function(tx, result) {
dbApp.log(title+'成功');
if(callback){
//如果有参数
callback(result);
function(tx, error) {
dbApp.log(title+'失败' + error.message);
createTable:function() {
dbApp.exeSql("create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)","创建表");
dropTable:function() {
dbApp.exeSql("drop table IF EXISTS goods","删除表");
//展示，加载数据
select:function() {
dbApp.exeSql("select id,name,price from goods","查询",[],function(result) {
//将表格中tr索引大于0的元素删除
$("#tabGoods tr:gt(0)").remove();
for(var i = 0; i & result.rows. i++) {
var tr = $("&tr/&");
$("&td/&").text(result.rows.item(i)["id"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["name"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["price"]).appendTo(tr);
var del = $("&a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' &删除 | &/a&")
var edit = $("&a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' &修改&/a&")
$("&td/&").append(del).append(edit).appendTo(tr);
tr.appendTo("#tabGoods");
//插入数据
insert:function() {
//如果insert方法被绑定为事件，则this表示事件发生的对象
dbApp.exeSql("insert into goods(name,price) values(?,?)","添加",[$("#name").val(), $("#price").val()],function(){
dbApp.select();
del:function(id, link) {
dbApp.exeSql("delete from goods where id=?","删除",[id],function(result){
//查找a标签最近的一个tr父元素，移除
$(link).closest("tr").remove();
edit:function(id) {
dbApp.exeSql("select id,name,price from goods where id=?","编辑",[id],function(result) {
$("#name").val(result.rows.item(0)["name"]);
$("#price").val(result.rows.item(0)["price"]);
$("#goodsId").val(result.rows.item(0)["id"]);
dbApp.log("修改后请保存");
update:function() {
if($("#goodsId").val()) {
dbApp.exeSql("update goods set name=?,price=?
where id=?","更新",[$("#name").val(), $("#price").val(), $("#goodsId").val()],function(result) {
dbApp.select();
$("#goodsId").val("");
dbApp.log("请选择要更新的记录 ");
dbApp.init();
运行结果：
4.10、美化页面
在原页面的基础上增加css样式，添加样式后的页面脚本如下：
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Web SQL Database&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&style type="text/css"&
margin: 0;
padding: 0;
font-family: "microsoft yahei";
#container{
padding: 10px;
font-size: 14px;
#container a{
color: #fff;
text-decoration: none;
margin-right: 5px;
#container a:hover{
color:orangered;
border: 0;
height: 22px;
line-height: 22px;
border-radius: 3px;
padding:<span style="background-color: #f5f5f5; color: #px;
background: dodgerblue;
color: white;
button:hover{
background: orangered;
#container h2{
height: 60px;
html #tabGoods{
width:<span style="background-color: #f5f5f5; color: #%;
margin: 15px 0;
border: 2px solid #0062CC;
#tabGoods,#tabGoods td,#tabGoods th
border: 1px solid #0062CC;
border-collapse: collapse;
#tabGoods td,#tabGoods th{
padding: 5px 0 5px 5px;
#fieldsetForm{
width: 400px;
padding: 10px;
border-radius: 10px;
border: 2px solid #0062CC;
#fieldsetForm p{
padding: 10px;
font-size: 16px;
font-weight: normal;
height: 100px;
overflow: auto;
margin-top: 10px;
&div id="container"&
&h2&Web SQL Database&/h2&
&button id="btnCreateTable"&创建表&/button&
&button id="btnDropTable"&删除表&/button&
&table id="tabGoods"&
&th&编号&/th&
&th&名称&/th&
&th&价格&/th&
&th&删除&/th&
&fieldset id="fieldsetForm"&
&legend&商品信息&/legend&
&label for="name"&名称：&/label&
&input type="text" id="name" value="" /&
&label for="price"&价格：&/label&
&input type="text" id="price" value="" /&
&input type="hidden" id="goodsId" /&
&button id="btnInsert"&添加&/button&
&button id="btnUpdate"&更新&/button&
&/fieldset&
&h2 id="msg"&&/h2&
&script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
//定义当前应用的对象
var dbApp = {
//打开数据库
openDb: function() {
//创建名称为products，版本为1.0,描述为产品数据库，3M大小的数据库
this.db = openDatabase("products", 1.0, "产品数据库", 1024 * 1024 * 3, function() {
this.log("创建或打开数据库完成");
init: function() {
//打开或创建数据库
this.openDb();
//绑定事件
this.bindEvent();
//展示数据
this.select();
this.log("初始化完成");
//绑定事件
bindEvent: function() {
//添加事件
$("#btnInsert").click(this.insert);
$("#btnUpdate").click(this.update);
$("#btnCreateTable").click(this.createTable);
$("#btnDropTable").click(this.dropTable);
//显示消息
log: function(info) {
$("#msg")[0].innerHTML += info + "&br/&";
//执行sql的通用方法 result.rowsAffected 影响行数
//callback执行成功时的回调方法
exeSql: function(sql, title, param, callback) {
title = title || "操作";
this.db.transaction(function(tx) {
tx.executeSql(
sql, param || [],
function(tx, result) {
dbApp.log(title + '成功');
if(callback) { //如果有参数
callback(result);
function(tx, error) {
dbApp.log(title + '失败' + error.message);
createTable: function() {
dbApp.exeSql("create table IF not EXISTS goods(id integer primary key autoincrement,name text not null,price double)", "创建表");
dropTable: function() {
dbApp.exeSql("drop table IF EXISTS goods", "删除表");
//展示，加载数据
select: function() {
dbApp.exeSql("select id,name,price from goods", "查询", [], function(result) {
//将表格中tr索引大于0的元素删除
$("#tabGoods tr:gt(0)").remove();
for(var i = 0; i & result.rows. i++) {
var tr = $("&tr/&");
$("&td/&").text(result.rows.item(i)["id"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["name"]).appendTo(tr);
$("&td/&").text(result.rows.item(i)["price"]).appendTo(tr);
var del = $("&a href='#' onclick='dbApp.del(" + result.rows.item(i)["id"] + ",this)' &删除&/a& ")
var edit = $("&a href='#' onclick='dbApp.edit(" + result.rows.item(i)["id"] + ",this)' &修改&/a&")
$("&td/&").append(del).append(edit).appendTo(tr);
tr.appendTo("#tabGoods");
//插入数据
insert: function() {
//如果insert方法被绑定为事件，则this表示事件发生的对象
dbApp.exeSql("insert into goods(name,price) values(?,?)", "添加", [$("#name").val(), $("#price").val()], function() {
dbApp.select();
del: function(id, link) {
dbApp.exeSql("delete from goods where id=?", "删除", [id], function(result) {
//查找a标签最近的一个tr父元素，移除
$(link).closest("tr").remove();
edit: function(id) {
dbApp.exeSql("select id,name,price from goods where id=?", "编辑", [id], function(result) {
$("#name").val(result.rows.item(0)["name"]);
$("#price").val(result.rows.item(0)["price"]);
$("#goodsId").val(result.rows.item(0)["id"]);
dbApp.log("修改后请保存");
update: function() {
if($("#goodsId").val()) {
dbApp.exeSql("update goods set name=?,price=?
where id=?", "更新", [$("#name").val(), $("#price").val(), $("#goodsId").val()], function(result) {
dbApp.select();
$("#goodsId").val("");
dbApp.log("请选择要更新的记录 ");
dbApp.init();
运行结果：
五、IndexedDB
Web Sql API的主要实现者是Chrome、Safari、Opera、Android、IOS、BB。IE和FF都不支持Web Sql API。
IndexedDB由于受到W3C的推崇。浏览器厂商的实现情况要好一些。但由于目前规范说明书还只是处于候选建议阶段。各大浏览器厂商目前的实现还有一些差异化。
IndexedDB是在浏览器中保存结构化数据的一种数据库，为了替换WebSQL（标准已废弃，但被广泛支持）而出现。IndexedDB使用NoSQL的形式来操作数据库，保存和读取是JavaScript对象，同时还支持查询及搜索。
示例代码：
if('indexedDB' in window){
//检测是否支持indexed database
mui.alert('您的手机占不支持');
//数据库信息
var DB = {
name:'admin_users',
function openDB(name,version){
//第一个参数是数据库名称，如果存在则打开，如果不存在就创建
//第二个参数是数据库版本，用于更新数据库结构
var request = window.indexedDB.open(name,version);
request.onerror = function(e){
mui.alert('打开数据库失败');
request.onsuccess = function(e){
db = request.
ReadAll();
//操作数据库（创建删除修改）
//首次打开数据库或改变数据库版本的时候触发
request.onupgradeneeded = function(e){
//使用createObjectStore()方法创建一个对象存储
//此方法接受两个参数：存储的名称和参数对象
//keypath是用户数据的唯一标识 或者使用索引
var objectStore = e.target.result.createObjectStore("users",{keyPath:'name'});
function Add(name,account,password){
//transaction()方法是用来指定我们想要进行事务处理的对象存储，接受3个参数
//第一个（必选）要处理的对象存储的列表数组
//第二个（可选）指定操作方式 只读/读写
//第三个（可选）版本变化
//add()方法用于添加数据
var request = db.transaction(["users"],"readwrite").objectStore("users").add({
name:name,
account:account,
password:password
request.onsuccess = function(e){
mui.toast('成功');
var list = document.querySelector('#list');
var dom = '&li class="mui-table-view-cell mui-collapse"&';
dom+= '&a class="mui-navigate-right" href="#"&'+name+'&/a&';
dom+= '&div class="mui-collapse-content"&&p&&span&账号：&/span&'+account+'&/p&';
dom+= '&p&&span&密码：&/span&'+password+'&/p&&/div&&/li&';
list.innerHTML +=
request.onerror = function(e){
mui.toast('失败');
function Read(name){
var objectStore = db.transaction(["users"]).objectStore("users");
//get()方法用于获取数据
var request = objectStore.get(name);
request.onerror = function(event){
mui.toast('读取失败');
request.onsuccess = function(event){
if(request.result){
console.log(request.result);
function ReadAll(){
var objectStore = db.transaction("users").objectStore("users");
//openCursor()方法用于获取所有数据
var request = objectStore.openCursor();
request.onsuccess = function(event){
//db.close();
var res = event.target.
var list = document.querySelector('#list');
var dom = '&li class="mui-table-view-cell mui-collapse"&';
dom+= '&a class="mui-navigate-right" href="#"&'+res.value.name+'&/a&';
dom+= '&div class="mui-collapse-content"&&p&&span&账号：&/span&'+res.value.account+'&/p&';
dom+= '&p&&span&密码：&/span&'+res.value.password+'&/p&&/div&&/li&';
list.innerHTML +=
//console.log(res.value);
res.continue();
request.onerror = function(e){
mui.toast('读取失败')
function Remove(name){
//delete()方法用于删除数据
var request = db.transaction("users","readwrite").objectStore('users').delete(name);
request.onsuccess = function(event){
mui.toast('删除成功');
request.onerror = function(){
mui.toast('删除失败')
openDB(DB.name,DB.version);
var submits = document.querySelector('#submit');
function display(dis){
var bg = document.querySelectorAll('.alert-bg')[0];
var alert = document.querySelectorAll('.alert')[0];
alert.style.display =
bg.style.display =
submits.onclick = function(){
= document.querySelector('#name').
var account
= document.querySelector('#account').
var password = document.querySelector('#password').
if(!name || !account || !password){
return mui.toast('请输入完整信息');
display('none');
Add(name,account,password)
5.1、数据库初始化
IndexedDB保存的是对象，而不是使用表保存数据。打开数据库使用indexDB.open方法，这方法有两个参数，第一个是数据库名称，第二个是数据版本号。
IndexedDB的操作完全是异步进行的，每一次IndexedDB操作，都需要注册onerror或onsuccess事件处理程序。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&IndexedDB&/title&
&h2&IndexedDB（NOSQL）&/h2&
&input value="创建数据库与表" type="button" onclick="create()" /&
&h2 id="msg"&&/h2&
//创建数据库与表
function create() {
//创建一个名称为gomall且版本为2的数据库，返回一个请求
var request = indexedDB.open("gomall", 2);
//绑定回调事件,成功时
request.onsuccess = function(e) {
db = e.target.
log('创建数据库成功');
request.onerror = function(e) {
log("错误：" + e.target.errorCode || e.target.error);
//增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
request.onupgradeneeded = function(e) {
//创建对象存储空间（ObjectStore），类似表,goods是表名，id是主键，存储的是JSON
e.target.result.createObjectStore("goods",{"keyPath":"id"});
log("初始化数据库成功！");
//显示消息
var msg = document.getElementById("msg");
function log(m) {
msg.innerHTML += m + "&br/&";
//用于判断浏览器是否支持indexedDB，0，null,'',undefind false
if(window.indexedDB) {
alert('请升级浏览器，如chrome');
这里要注意的是，数据库版本只会有最新一个，不会同时存在两个版本的同名数据库。
运行结果：
5.2、对象存储空间（ObjectStore）
对象存储空间（ObjectStore）可以想象成关系数据库的表，在初始化DB触发onupgradeneeded时，创建ObjectStore。使用createObjectStore方法，第一个参数是对象名，第二个参数是对象属性，一般是设置keyPath（作为键使用）。
因为对新数据的操作都需要在transaction中进行，而transaction又要求指定object store，所以我们只能在创建数据库的时候初始化object store以供后面使用，这正是onupgradeneeded的一个重要作用
有了数据库后我们自然希望创建一个表用来存储数据，但indexedDB中没有表的概念，而是objectStore，一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。也就是说一个objectStore相当于一张表，里面存储的每条数据和一个键相关联。
我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异
不使用&&任意值，但是没添加一条数据的时候需要指定键参数
keyPath&&Javascript对象，对象必须有一属性作为键值
keyGenerator&&任意值（db.createObjectStore('students',{autoIncrement: true});）
都使用&&Javascript对象，如果对象中有keyPath指定的属性则不生成新的键值，如果没有自动生成递增键值，填充keyPath指定属性
req.onupgradeneeded = function (evt) {
console.debug("initDb.onupgradeneeded");
var db = evt.currentTarget.
//ObjectStore必须在onupgradeneeded里创建，其他地方将会创建失败
var usersStore = db.createObjectStore("users", { keyPath : "id" });
效果如下：
所有读取或修改数据的操作，都要通过事务来完成。创建事务使用transaction方法，第一个参数是需要访问的ObjectStore，第二个参数是访问模式（readwrite可读可写、readonly只读，默认是只读）。
5.4、添加数据
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&IndexedDB&/title&
&h2&IndexedDB（NOSQL）&/h2&
&input value="创建数据库与表" type="button" onclick="create()" /&
&input value="新增数据" type="button" onclick="add()" /&
&h2 id="msg"&&/h2&
//创建数据库与表
function create() {
//创建一个名称为gomall且版本为2的数据库，返回一个请求
var request = indexedDB.open("gomall", 2);
//绑定回调事件,成功时
request.onsuccess = function(e) {
db = e.target.
log('创建数据库成功');
request.onerror = function(e) {
log("错误：" + e.target.errorCode || e.target.error);
//增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
request.onupgradeneeded = function(e) {
//创建对象存储空间（ObjectStore），类似表,goods是表名，id是主键，存储的是JSON
e.target.result.createObjectStore("goods",{"keyPath":"id"});
log("初始化数据库成功！");
//新增数据
function add(){
//创建事务对象
var tx=db.transaction("goods","readwrite");
//从数据库中获得存储对象，表
var goods=tx.objectStore("goods");
//javascript中的对象数组
var items=[{"id":1,"name":"iPhone 11","price":19999.5},{"id":2,"name":"华为荣耀V9","price":1997.3}];
for(var i=0;i&items.i++){
goods.add(items[i]);
log("添加数据成功！");
//显示消息
var msg = document.getElementById("msg");
function log(m) {
msg.innerHTML += m + "&br/&";
//用于判断浏览器是否支持indexedDB，0，null,'',undefind false
if(window.indexedDB) {
alert('请升级浏览器，如chrome');
View Code&
5.5、获取单个对象数据
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&IndexedDB&/title&
&h2&IndexedDB（NOSQL）&/h2&
&input value="创建数据库与表" type="button" onclick="create()" /&
&input value="新增数据" type="button" onclick="add()" /&
&input value="获得单个对象" type="button" onclick="getSingle()" /&
&h2 id="msg"&&/h2&
//创建数据库与表
function create() {
//创建一个名称为gomall且版本为2的数据库，返回一个请求
var request = indexedDB.open("gomall", 2);
//绑定回调事件,成功时
request.onsuccess = function(e) {
db = e.target.
log('创建数据库成功');
request.onerror = function(e) {
log("错误：" + e.target.errorCode || e.target.error);
//增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
request.onupgradeneeded = function(e) {
//创建对象存储空间（ObjectStore），类似表,goods是表名，id是主键，存储的是JSON
e.target.result.createObjectStore("goods", {
"keyPath": "id"
log("初始化数据库成功！");
//新增数据
function add() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//javascript中的对象数组
var items = [{
"name": "iPhone 11",
"price": 19999.5
"name": "华为荣耀V9",
"price": 1997.3
for(var i = 0; i & items. i++) {
goods.add(items[i]);
log("添加数据成功！");
//获得单个对象
function getSingle() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//请求key为1的对象
var request=goods.get(1);
request.onsuccess=function(e){
var obj=e.target.
//JSON.stringify将obj对象转换成字符
log(JSON.stringify(obj));
log(obj.id+"，"+obj.name+"，"+obj.price);
//显示消息
var msg = document.getElementById("msg");
function log(m) {
msg.innerHTML += m + "&br/&";
//用于判断浏览器是否支持indexedDB，0，null,'',undefind false
if(window.indexedDB) {
alert('请升级浏览器，如chrome');
5.6、修改数据
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&IndexedDB&/title&
&h2&IndexedDB（NOSQL）&/h2&
&input value="创建数据库与表" type="button" onclick="create()" /&
&input value="新增数据" type="button" onclick="add()" /&
&input value="获得单个对象" type="button" onclick="getSingle()" /&
&input value="更新对象" type="button" onclick="edit()" /&
&h2 id="msg"&&/h2&
//创建数据库与表
function create() {
//创建一个名称为gomall且版本为2的数据库，返回一个请求
var request = indexedDB.open("gomall", 2);
//绑定回调事件,成功时
request.onsuccess = function(e) {
db = e.target.
log('创建数据库成功');
request.onerror = function(e) {
log("错误：" + e.target.errorCode || e.target.error);
//增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
request.onupgradeneeded = function(e) {
//创建对象存储空间（ObjectStore），类似表,goods是表名，id是主键，存储的是JSON
e.target.result.createObjectStore("goods", {
"keyPath": "id"
log("初始化数据库成功！");
//新增数据
function add() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//javascript中的对象数组
var items = [{
"name": "iPhone 11",
"price": 19999.5
"name": "华为荣耀V9",
"price": 1997.3
for(var i = 0; i & items. i++) {
goods.add(items[i]);
log("添加数据成功！");
//获得单个对象
function getSingle() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//请求key为1的对象
var request = goods.get(2);
request.onsuccess = function(e) {
var obj = e.target.
//JSON.stringify将obj对象转换成字符
log(JSON.stringify(obj));
log(obj.id + "，" + obj.name + "，" + obj.price);
//更新对象
function edit() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//javascript中的对象数组
var item = {
"name": "华为荣耀P15",
"price":1357.9,
"os":"android"
//执行更新
var request=goods.put(item);
request.onsuccess=function(e){
log(e.target.result);
//显示消息
var msg = document.getElementById("msg");
function log(m) {
msg.innerHTML += m + "&br/&";
//用于判断浏览器是否支持indexedDB，0，null,'',undefind false
if(window.indexedDB) {
alert('请升级浏览器，如chrome');
5.7、删除数据
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&IndexedDB&/title&
&h2&IndexedDB（NOSQL）&/h2&
&input value="创建数据库与表" type="button" onclick="create()" /&
&input value="新增数据" type="button" onclick="add()" /&
&input value="获得单个对象" type="button" onclick="getSingle()" /&
&input value="更新对象" type="button" onclick="edit()" /&
&input value="删除对象" type="button" onclick="del()" /&
&h2 id="msg"&&/h2&
//创建数据库与表
function create() {
//创建一个名称为gomall且版本为2的数据库，返回一个请求
var request = indexedDB.open("gomall", 2);
//绑定回调事件,成功时
request.onsuccess = function(e) {
db = e.target.
log('创建数据库成功');
request.onerror = function(e) {
log("错误：" + e.target.errorCode || e.target.error);
//增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
request.onupgradeneeded = function(e) {
//创建对象存储空间（ObjectStore），类似表,goods是表名，id是主键，存储的是JSON
e.target.result.createObjectStore("goods", {
"keyPath": "id"
log("初始化数据库成功！");
//新增数据
function add() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//javascript中的对象数组
var items = [{
"name": "iPhone 11",
"price": 19999.5
"name": "华为荣耀V9",
"price": 1997.3
for(var i = 0; i & items. i++) {
goods.add(items[i]);
log("添加数据成功！");
//获得单个对象
function getSingle() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//请求key为1的对象
var request = goods.get(2);
request.onsuccess = function(e) {
var obj = e.target.
//JSON.stringify将obj对象转换成字符
log(JSON.stringify(obj));
log(obj.id + "，" + obj.name + "，" + obj.price);
//更新对象
function edit() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//javascript中的对象数组
var item = {
"name": "华为荣耀P15",
"price":1357.9,
"os":"android"
//执行更新
var request=goods.put(item);
request.onsuccess=function(e){
log(e.target.result);
//删除对象
function del() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//执行删除操作
var request=goods.delete(2);
//成功时的回调
request.onsuccess=function(e){
log(e.target.result);
//显示消息
var msg = document.getElementById("msg");
function log(m) {
msg.innerHTML += m + "&br/&";
//用于判断浏览器是否支持indexedDB，0，null,'',undefind false
if(window.indexedDB) {
alert('请升级浏览器，如chrome');
5.8、清空数据
function clearData(){
var tx = db.transaction("users", READ_WRITE);
var store = tx.objectStore("users");
var req = store.clear();
req.onsuccess = function (evt) {
console.debug("clearData success");
req.onerror = function (evt) {
console.error("clearData error:", evt.target.errorCode || evt.target.error);
5.9、游标查询
使用事务可以直接通过键检索单个对象，而需要检索多个对象时候就需要使用游标。游标是指向结果集的指针，不提前收集结果。游标指针会先指向结果中的第一项，在接到查找下一项指令时，才会指向下一项。
function openCursor(){
var tx = db.transaction("users", READ_WRITE);
var store = tx.objectStore("users");
var req = store.openCursor();
req.onsuccess = function (evt) {
var cursor = evt.target.
if(cursor){ //必要检查
var value = cursor.
console.log(value);
if(value.name == '杨幂'){
value.age = 16;
cursor.update(value); //修改数据(必须是读写模式)
if(value.name == '柳岩'){
cursor.delete();
//删除当前项
cursor.continue(); //移动到下一项
req.onerror = function (evt) {
console.error("openCursor error:", evt.target.errorCode || evt.target.error);
这里有几点要注意：
1. 如果需要修改或删除数据，就需要打开成读写模式。
2. cursor的非空校验是必要的。
3. 修改或删除的操作也是有onsuccess和onerror的，只是在示例中没有写出来。
4. 调用continue才会移动到下一项
另外可以设置游标的键范围和游标的方向，即打开openCursor方法时可以传这两个参数（openCursor(键范围,方向)），第一个参数是object类型，第二个参数是字符串类型。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&IndexedDB&/title&
&h2&IndexedDB（NOSQL）&/h2&
&input value="创建数据库与表" type="button" onclick="create()" /&
&input value="新增数据" type="button" onclick="add()" /&
&input value="获得单个对象" type="button" onclick="getSingle()" /&
&input value="更新对象" type="button" onclick="edit()" /&
&input value="删除对象" type="button" onclick="del()" /&
&input value="获得多个对象(游标)" type="button" onclick="getAll()" /&
&h2 id="msg"&&/h2&
//创建数据库与表
function create() {
//创建一个名称为gomall且版本为2的数据库，返回一个请求
var request = indexedDB.open("gomall", 2);
//绑定回调事件,成功时
request.onsuccess = function(e) {
db = e.target.
log('创建数据库成功');
request.onerror = function(e) {
log("错误：" + e.target.errorCode || e.target.error);
//增加数据库版本号时,会触发onupgradeneeded事件(会在onsuccess之前被调用)
request.onupgradeneeded = function(e) {
//创建对象存储空间（ObjectStore），类似表,goods是表名，id是主键，存储的是JSON
e.target.result.createObjectStore("goods", {
"keyPath": "id"
log("初始化数据库成功！");
//新增数据
function add() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//javascript中的对象数组
var items = [{
"name": "iPhone 13",
"price": 19999.5
"name": "华为荣耀V10",
"price": 1997.3
for(var i = 0; i & items. i++) {
goods.add(items[i]);
log("添加数据成功！");
//获得单个对象
function getSingle() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//请求key为1的对象
var request = goods.get(2);
request.onsuccess = function(e) {
var obj = e.target.
//JSON.stringify将obj对象转换成字符
log(JSON.stringify(obj));
log(obj.id + "，" + obj.name + "，" + obj.price);
//更新对象
function edit() {
//创建事务对象
var tx = db.transaction("goods", "readwrite");
//从数据库中获得存储对象，表
var goods = tx.objectStore("goods");
//javascript中的对象数组
var item = {
"name": "华为荣耀P15",
"price": 1357.9,
"os": "android"
//执行更新
var request = goods.put(item);
request.onsuccess = function(e) {