之前,本地存储数据都是用 cookie 完成的,但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据,它使在不影响网站性能的情况下存储大量数据成为可能。
Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。他可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在,对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
同 cookie 相同,HTML5 也使用 JavaScript 来存储和访问数据。
在使用 web 存储前,可以使用下面代码检查浏览器是否支持 localStorage 和 sessionStorage 这两个新对象:
浏览器支持点我 show(){ ){ ); 13 } 14 else{ ); 16 } 17 }
(1)、localStorage 对象
localStorage 对象存储的数据没有时间限制,第二天、第二周或下一年之后,数据依然可用。
创建并访问 localStorage:
1 <script> 2 localStorage.username = '小明'; 3 document.write('User name: ' + localStorage.username); 4 </script>
代码解析:
①、使用 key='username' 和 value='小明' 创建一个 localStorage 键/值对。
②、在访问时,直接访问 localStorage 键。
注意:键/值对通常以字符串存储,可以根据需要转换该格式。
下面的例子,对用户访问页面的次数进行计数,并将字符串值转换为数字类型:
1 <script> 2 if(localStorage.F5count){ 3 localStorage.F5count = Number(localStorage.F5count) + 1; 4 } 5 else{ 6 localStorage.F5count = 1; 7 } 8 document.write("访问: " + localStorage.F5count + " time(s)."); 9 </script>
在浏览器打开上面的例子,刷新页面会看到计数器在增长,关闭浏览器再打开后,计数器会继续计数。
(2)、sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
session 翻译为会话,在计算机中,尤其是在网络应用中,被称为“会话控制”。Session 对象存储特定用户会话所需的信息。这样,当用户在应用程序的 Web 页之间跳转时,存储在 Session 对象中的变量将不会丢失,而是在整个用户会话中一直存在下去。当用户请求来自应用程序的 Web 页时,如果该用户还没有会话,则 Web 服务器将自动创建一个 Session 对象。当会话过期或被放弃后,服务器将终止该会话。Session 对象最常见的一个用法就是存储用户的首选项。在 PHP 中 Session 变量用于存储用户的信息,或者为一个用户的 session 更改设置。Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用。
HTTP 是一种无状态性的协议,因为此种协议不要求浏览器在每次请求中标明他自己的身份,并且浏览器以及服务器之间并没有保持一个持久性的连接用于多个页面之间的访问。当一个用户访问一个站点的时候,用户的浏览器发送一个 HTTP 请求到服务器,服务器返回给浏览器一个 HTTP 响应。简单说就是,客户端发送一个请求,服务器端响应一个回复,这就是整个基于 HTTP 协议的通讯过程。Web 应用程序就是基于 HTTP 协议进行通讯的。
大多数 Web 应用程序都离不开 session 的使用,当你操作某个应用程序时,你打开他,然后更改一些设置,再关闭他,这就很像一次会话,计算机清楚你是谁,他清楚你在何时打开或关闭应用程序,但是 Web 不知道,由于 HTTP 地址无法维持状态,所以 Web 服务器并不知道你是谁以及你做了什么。
通过在服务器上存储用户信息以便随后使用,PHP session 解决了这个问题(比如用户名称、购买商品等)。不过,会话信息是临时的,在用户离开网站后将被删除。如果需要永久储存信息,可以把数据存储在数据库中。
Session 的工作机制是:为每个访问者创建一个唯一的 id (UID),并基于这个 UID 来存储变量。UID 存储在 cookie 中,亦或通过 URL 进行传导。
创建并访问一个 sessionStorage: