【HTML5】本地存储

本地存储

• 传统Web应用程序将大多数据都存储在Web服务器端的数据库中，本地存储的能力很弱。而频繁地访问数据库服务器获取数据，不但会增加网络流量，而且影响应用程序的效率
• HTML5的本地存储能力得到了很大的提高，不但可以像传统Web应用程序那样将数据存储在文件中，而且还支持本地的轻型数据库。

HTML4的本地数据存储方式

• 在传统的Web程序中，通常使用Cookie和Session来存储本地数据。

• Cookie技术是客户端的解决方案，Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。用于认证用户身份

• Session是服务器端使用的一种记录客户端状态的机制，使用上比Cookie简单一些，相应的也增加了服务器的存储压力

Cookie存在如下缺陷

• 大小：Cookie的数据大小有限制，大多数浏览器只支持最大为 4KB的 Cookie。有时不能满足需求。

• 带宽：cookies随HTTP事物一起发送，因此会浪费一部分发送cookies时使用的带宽。

• 复杂性：cookies操作麻烦，所有信息要被拼到一个长字符串中。

• 安全性：当多人共用一台计算机时使用Cookie可能会泄露用户隐私，带来安全问题。

• 客户端可以禁用或清空Cookie，从而影响程序的功能。

HTML5本地存储技术

• localstorage
• sessionstorage
• web SQL数据库
• IndexedDB

localstorage

• 将数据保存在客户端本地的硬件设备中，即使浏览器关闭，该数据仍然存在，下次打开浏览器访问网站时仍然可以继续使用。
• localstorage类似于Cookie，用于持久化的本地存储。
• localstorage没有有效期，除非主动删除数据，否则数据是永远不会过期的。
• localstorage的存储能力也远大于Cookie，可以存储多达5MB的数据。

sessionstorage

• 将数据保存在session对象中。
• Session对象可以用来保存用户从进入网站到浏览器关闭这段时间内所要求保存的任何数据。
• sessionstorage类似于Session，用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储。
• localStorage是永久保存，sessionStorage是临时保存。

Web SQL数据库

• 除了使用localstorage将数据存储在本地文件中，HTML5甚至支持本地的web SQL数据库。

• 传统的Web应用程序都是使用脚本语言访问Web服务器上的数据库，但是访问服务器会产生网络流量，而且需要等待服务器的响应。操作本地数据库无疑大大提升了HTML5的本地数据存储能力。

IndexedDB

• IndexedDB是一种轻量级NoSQL数据库。NoSQL是非关系型的数据库，NoSQL是Not Only
  SQL的缩写，意即反SQL运动，是一项全新的数据库革命性运动。

• HTML5支持两种不同类型的数据库，给了用户跟多的选择，足以应对各种需求的Web应用程序。

localstorage

• 浏览器对localstorage的支持情况
• 使用localstorage保存数据
• 获取localstorage中的数据
• 删除localstorage中的数据

浏览器对localstorage的支持情况

• 在JavaScript中可以使用window.localStorage属性检测浏览器对localstorage的支持情况。
• 如果window.localStorage等于true，则表明当前浏览器支持localstorage；否则表明不支持。

例子：
在网页中定义一个按钮，单击此按钮时，会检测浏览器是否支持localstorage。


使用localstorage保存数据

• localstorage使用“键－值”对保存数据。
• 可以使用setItem()方法设置localstorage数据，语法：
• localStorage.setItem(<键名>, <值>)
• 也可以通过localStorage.<键名>和localStorage[<键名>]的形式访问localstorage数据。
• 例如，下面3条语句都可以在localstorage中存储键名为"key"、值为"value"的数据：
• localStorage.setItem(“key”, “value”);
• localStorage.key = “value”;
• localStorage[“key”] = “value”;

例子：


获取localstorage中的数据

• 使用getItem()方法设置localstorage数据，语法：
• <值> = localStorage.getItem(<键名>);
• 也可以通过localStorage.<键名>和localStorage[<键名>]的形式访问localstorage数据。
• 例如，下面3条语句都可以获取localstorage中存储的键名为"key"的数据值到变量value中：
• var value = localStorage.getItem(“key”);
• var value = localStorage.key;
• var value = localStorage[“key”];

例子：
页面中再定义一个按钮，单击此按钮时，从localstorage中获取键名为"key"的值。


执行效果


例子：
记录并显示页面访问次数


删除localstorage中的数据

• 调用localStorage.removeItem()方法可以删除localstorage中指定键的项，语法：
• localStorage.removeItem(key)
• key为要删除的指定键。
• localStorage.clear()方法可以删除localstorage中所有的数据。

sessionstorage

• 判断浏览器是否支持sessionstorage
• 使用sessionstorage保存数据
• 获取sessionstorage中的数据
• 删除sessionstorage中的数据

判断浏览器是否支持sessionstorage

• 在JavaScript中可以使用window. sessionStorage属性检测浏览器对sessionstorage的支持情况。

• 如果window. sessionStorage等于true，则表明当前浏览器支持sessionstorage；否则表明不支持。

例子：

使用sessionstorage保存数据

• 与localstorage一样，sessionstorage也使用“键－值”对保存数据，可以使用setItem()方法设置sessionstorage数据，语法：

• sessionStorage.setItem(<键名>, <值>)

• 也可以通过sessionStorage.<键名>和sessionStorage [<键名>]的形式访问sessionstorage数据。

• 例如，下面3条语句都可以在sessionStorage中存储键名为"key"、值为"value"的数据：

• sessionStorage.setItem(“key”, “value”);

• sessionStorage.key = “value”;

• sessionStorage [“key”] = “value”;

获取sessionstorage中的数据

• 使用getItem()方法设置sessionstorage数据，也可以通过sessionstorage.<键名>和sessionstorage[<键名>]的形式访问sessionstorage数据。

• 例如，下面3条语句都可以获取localstorage中存储的键名为"key"的数据值到变量value中：

• var value = sessionStorage.getItem(“key”);

• var value = sessionStorage.key;

• var value = sessionStorage [“key”];

例子：


删除sessionstorage中的数据

• 调用sessionStorage.removeItem()方法可以删除sessionStorage中指定键的项，语法：
• sessionStorage.removeItem(key)
• key为要删除的指定键。
• sessionStorage.clear()方法可以删除sessionStorage中所有的数据

HTML5本地存储小结

HTML5新增一种非常重要的功能是可以在客户端本地存数据的Web Storage功能。其中localStorage持久化本地存储，类似于Cookie，但没有有效期，除非主动删除数据。另一种sessionStorage用于本地存储一个会话中的数据，这些数据只在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，类似于session。