HTML5中新增的重要功能可以在客户端本地保存数据便是Web Storage。在HTML4中我们是通过cookies在客户端保存网站用户名等信息，但是cookies的局限性也在长期的使用过程中被发现：
1． Cookies大小被限制在4KB。
2． Cookies随HTTP事务一起被发送，这样会浪费一部分带宽。
3． Cookies很难被操纵，因为它复杂。
二、HTML5 Web Storage的分类
为此HTML5提供了Web Storage—在客户端保存本地数据的方法，然而HTML5 Web Storage具体的来说它又分为两种。
1． sessionStorage：顾名思义，就是将数据保存在session对象中，在用户浏览某个网站是，从进入这个网站到浏览器被关闭的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存这段时间内所要求保存的任何数据。
2． localStorage：将数据保存在客户端本地的硬件设备，可以是硬盘，也可以是其他硬件设备，即使浏览器被用户关闭，也能将数据保存下来，在用户在此进入网站是任然可以继续使用。
总体来说，Web Storage的两种存储方法的区别在于，sessionStorage为临时存储，localStorage为永久存储
HTML5 Web Storage示例
一、 DEMO HTML代码
上一次介绍了HTML5 Web Storage存储机制，原来必须保存在服务端数据库中的内容现在可以直接保存在客户端本地了，这不仅可以减轻了服务器数据访问的负担，同时也提高了数据 的访问速度。请将下面的代码复制到html文件中，我们通过示例来了解Web Storage。
| <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5 Web Storage示例</title> <script type="text/javascript" src="JS/webstoragescript.js"> </script> </head> <body> <div> <h2>sessionStorage示例</h2> <p id="sessionMsg"></p> <input type="text" id="sessionInput"> <input type="button" value="保存数据" onClick="savesessionStorage('sessionInput');"> <input type="button" value="读取数据" onClick="loadsessionStorage('sessionMsg');"> <br /> <h2>localStorage示例</h2> <p id="localMsg"></p> <input type="text" id="localInput"> <input type="button" value="保存数据" onClick="savelocalStorage('localInput');"> <input type="button" value="读取数据" onClick="loadlocalStorage('localMsg');"> </div> </body> </html> |
上为DEMO HTML代码
当我们点击保存数据时，分别调用webstoragescript.js（代码在文章 后面）中的savesessionStorage和savelocalStorage方法，点击读取数据时分别调用loadsessionStorage 和loadlocalStorage方法。
让我们打开JS脚本文件来看下，该脚本分别使用了sessionStorage和localStorage两种方法。这两种方法的HTML代码只有p id和input id不同 ，都是当用户在input文本输入内容并点击保存数据按钮时保存数据，点击读取数据时读取保存的数据。
但是他们对数据的处理方式都不一样，sessionStorage方法如果关闭了浏览器，这个保存的数据就丢失，在一次打开浏览器浏览这个页面的时候，点击读取数据将读取不到任何数据。
而localStorage则是浏览器被关闭，下次在打开浏览器浏览这个页面点击读取数据时任然能读取到保存的数据。当然，这个数据是区分浏览器的，在别的浏览器中是读取不到这个浏览器保存的数据的。
二、两种对象使用方法
1．sessionStorage
保存数据：sessionStorage.setItem(key,value);
读取数据：sessionStorage.getItem(key);
2．localStorage
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
看上面的说明相信大家都能很快明白两种对象的使用方法。但是，不管是使用哪个对象，都是用setItem(键名,键值)的方法来保存数据，保存后不允许修 改键名，但是可以修改键值也就是说只新建键名，再保存键值。使用getItem方法读取数据时，将参数指定为键名，返回键值。
| // sessionStorage示例JS function savesessionStorage(id){ var target= document.getElementById(id); var str=target.value; sessionStorage.setItem("message",str); } function loadsessionStorage(id){ var target=document.getElementById(id); var msg=sessionStorage.getItem("message"); target.innerHTML=msg; } // localStorage示例JS function savelocalStorage(id){ var target= document.getElementById(id); var str=target.value; localStorage.setItem("message",str); } function loadlocalStorage(id){ var target=document.getElementById(id); var msg=localStorage.getItem("message"); target.innerHTML=msg; } |
webstoragescript.js代码