今天就跟大家聊聊有关Web Storage概述和本地数据库是什么意思，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

10余年的琼山网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整琼山建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“琼山网站设计”,“琼山网站推广”以来，每个客户项目都认真落实执行。

Web Storage概述

在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以再客户端本地保存数据的Web Storage功能，之前可以使用Cookies在客户端

保存诸如用户名等简单用户信息，但通过长期使用，人们发现使用Cookies存储永久数据存在几个问题。

• 大小：Cookies的大小被限制在4KB

• 带宽：Cookies是随HTTP失误一起被发送的，因此会浪费一部分发送Cookies时使用的带宽

• 复杂性：要正确的操纵Cookies是很困难的。

针对以上问题，HTML5中，重新提供了一中在客户端本地保存数据的功能，他就是Web Storage。

Web Storage功能。

顾名思义，Web Storage功能就是在Web上存储数据的功能，这里的存储是针对客户端本地而言的。具体分为两种：

sessionStorage：将数据保存在session对象中。session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏

览这个网站所花费的时间。session对象可以用来保存在这段时间内所要保存的任何数据。

localStorage：将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时仍然可以

继续使用。localstorage 是通过键值对来存储的。

开发工具我使用HBuilder.exe

新建Test.html页面，代码如下：

View Code

localStorage关闭浏览器之后再打开，读取数据依旧存在，而sessionStorage关闭浏览器之后再打开读取数据就不见了。

作为简单数据库来利用

将Web Storage作为简易数据库，如果能解决数据检索，对列进行管理，就可以将Web Storage作为数据库来利用了。

新建Register.html页面，代码如下：

用户名:
电话号码:
地址:

用户名：

View Code

HTML5 本地数据库

在HTML5中，大大丰富了客户端本地可以存储的内容，添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序性能，减轻了服务器的负担，使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。在HTML5中内置了两种本地数据库，一种为SQLLite，一种为indexedDB。

用executeSql来执行查询
1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
2.function dataHandler(transaction,results);
3.function errorHandler(transaction,errmsg);
4.rows.length获取记录的条数

新建SqlTest.html，代码如下：

HTML5 indexedDB数据库

在HTML5中，新增了一种被称为“indexedDB”的数据库，该数据库是一种存储在客户端本地的NoSql数据库。

新建IndexedDBTest.html，代码如下：

View Code

数据库的版本更新

只是成功链接数据库，我们还不能执行任何数据操作，我们还应该创建相当于关系型数据库中数据表的对象仓库与用于检索数据的索引。

新建versionUpdate.html，代码如下：

View Code

创建对象仓库

对于创建对象仓库与索引的操作，我们只能在版本更新事务内部进行，因为在indexedDB API中不允许数据库中的对象仓库在同一个版本中发生改变。

新建createStorge.html，代码如下：

View Code

看完上述内容，你们对Web Storage概述和本地数据库是什么意思有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。