HTML5在客户端存储数据的新方法——localStorage · 前端小册

### HTML5在客户端存储数据的新方法——localStorage localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等智能手机上的web浏览器都能正常使用该特性。 localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动，数据让然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。 ### cookie、 sessionStorage 、localStorage之间的区别和使用 cookie:存储在用户本地终端上的数据。有时也用cookies，指某些网站为了辨别用户身份，进行session跟踪而存储在本地终端上的数据，通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。使用场景： localStorage可以用来统计页面访问次数。 sessionStorage可以用来统计当前页面元素的点击次数。 cookie一般存储用户名密码相关信息，一般使用escape转义编码后存储。使用实例：刷新页面会看到计数器在增长。请关闭浏览器窗口，然后再试一次，计数器会继续计数。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。 ~~~ document.write("Visits "+ localStorage.pagecount + " time(s)."); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script> </html> ~~~ 重置：刷新页面会看到计数器在增长。请关闭浏览器窗口，然后再试一次，计数器已经重置了。 ~~~ document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits " + sessionStorage.pagecount + " time(s) this session."); </script> </html> ~~~ 注意：nternet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。注意: Internet Explorer 7 及更早IE版本不支持web 存储。因此：在使用 web 存储前,应检查浏览器是否支持 localStorage 和~~~ sessionStorage: if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! // 一些代码..... } else { // 抱歉! 不支持 web 存储。 } ~~~