HTML5 学习笔记（三）——本地存储 - SeeYouBug_H5之家

一、HTML4客户端存储

B/S架构的应用大量的信息存储在服务器端，客户端通过请求响应的方式从服务器获得数据，这样集中存储也会给服务器带来相应的压力，有些数据可以直接存储在客户端，传统的Web技术中会使用Cookie，但Cookie有一些缺点，为了说明这个缺点我们先看看当提交表单时会有那些信息会被浏览器收集后发送到服务器。

1.1、提交表单发送到服务器的信息

1)、带name的可用表单元素

2)、url

3)、客户端请求头部信息

4)、cookie

pageEncoding定义一个cookie对象 Cookie cookie); //设置过期时间为365小时,以秒为单位 cookie.setMaxAge(); //添加cookie response.addCookie(cookie); content提交表单测试提交表单测试名称：价格：数量：

运行结果：

服务器在响应头部中声明要求客户端浏览器指定设置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 的存储方式。

二、localStorage

localStorage：将数据保存在客户端本地的硬件设备（通常指硬盘，但也可以是其他硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。

2.1、添加

localStorage 本地存储localStorage 本地存储添加 add_click() { ); ; ; }

运行结果：

2.2、取值

localStorage 本地存储localStorage 本地存储添加取值d02.html); add_click() { ); ; ; } get_click() { msg.innerHTML; msg.innerHTML; msg.innerHTML; }

运行结果：

2.3、修改

update_click() { //如果不存在就添加，如果存在就修改 localStorage.setItem("name","iPhone 8 plus手机"); //修改办法2 localStorage["price"]=899.5; //修改办法3 localStorage.amount=100; }

运行结果：

2.4、删除

localStorage 本地存储localStorage 本地存储添加取值修改删除d02.html); add_click() { ); ; ; } get_click() { msg.innerHTML; msg.innerHTML; msg.innerHTML; } update_click() { ); ; ; } delete_click() { localStorage.clear(); }

运行结果：