html5数据存储

就目前为止实现客户端存储的方式是多种多样,最简单而且兼容性最佳的方案是cookies,但是作为真正的客户端存储,cookies还存在一些不足。
大小 |
cookie的大小被限制在4KB。 |
带宽 |
cookie是随http事务一起发送的,因此会浪费一部分发送cookies时使用的带宽。 |
复杂 |
cookies操作起来比较麻烦:所有信息要被拼到一个长字符串里面。 |
联系 |
对cookiess来说,在相同的站点与多事务处理保持联系不是很容易。 |
在这种情况下,在HTML5中重新提供了一种在客户端本地保存数据的功能“web storage”
功能。
它包含两种存储类型
立即学习“前端免费学习笔记(深入)”;
SessionStorage和localStorage二者都支持在同域下存储5MB数据
不同点在于
SessionStorage的数据为临时保存(当用户关闭浏览器---数据将不存在)
localStorage为永久保存,用户关闭浏览器---数据仍然存在(除非用户手动清空)
※下面我们可以用例子来证明一下※
首先创建两个页面

页面代码如下:
Index.html->
打开测试页面看一下
Test.html->
先打开首页看看->单击链接

可以看到这几个效果


好吧现在我们关闭浏览器来看看效果
首先把链接复制下来
我们现在只打开这个text这个页面
现在可以看到这个临时会话在我们关闭浏览的时候就消失了

但是通过localstorage保存的数据还存在

所以这里的的数据就根据你使用的情况不同来使用不同的存储啦
一般比较的大的图像数据比如固定的会用bese64存到本地会话中,但是值得注意的是这里存储也是有5MB的限制,而且通过键值对的形式存储,也不利于程序的扩展,所以这里还提供HTML另一种存储机制“web sql”。
在HTML5中内置了一个可以通过SQL语言来访问的数据库,看名字就知道这是数据库本地存储功能,这是一个真正的数据库,可以查询和添加数据,在HTML5中,大大丰富了客户端本地可以存储的内容。
目前,像这种不需要存储在服务器上的,被称为“SQLLLIte”的文件型SQL数据已经得到了很广泛的应用,所以HTML5中也采用了这种数据库来作为本地数据库。
我们还是直接用例子来说明---(因为学过数据库的大致明白这就是本地的数据,基本和我们平常安装的数据库是一样的。)
新建一个
WebSQL.html

我们打开搜狗浏览器查看一下->这里在控制台中查看


这里我们十分清晰的可以看到插入到本地数据库的语句是和我们写的一至的
那么我们再新建一个页面来看看我们关闭浏览器后查看本地数据中的数据
selectSQL.html
打开页面

控制台中可以看到
当然啦这个都是很简单的,但是正是慢慢的积累才能一步步成长。所以和大家一起学习啦











