HTML5本地存储

1. HTML5为我们提供了在客户端存储数据的新方法

   即web storage本地存储：其中包含了 localStorage (一种没有时间限制的数据存储)和 sessionStorage (针对一个会话的数据存储)。
   

   
   

2. 本地存储localStorage 和 sessionStorage 介绍

   localStorage 方法：存储的数据没有时间限制,除非手动删除。否则第二天、第二周或下一年之后，数据依然可用。

   sessionStorage 方法：针对一个 session 进行数据存储。在用户将浏览器窗口关闭后，数据将被清除。

   
   
3. web storage 与 cookie 的差别

   在这之前，数据存储都是由cookie完成的。

   但是 cookie 不适合大量数据的存储，cookie 数据不能超过 4k ，同时因为每次http请求都会携带 cookie ，所以cookie 只适合保存很小的数据。同时因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

   并且使用 cookie 还需要我们自己去封装 setCookie 和 getCookie 方法。

   而在 web storage 中，虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。无论是 localStorage 还是 sessionStorage 都拥有自带的 setItem、getItem、removeItem 和 clear 等方法。

   所以在数据存储这一方面使用 web storage 毫无疑问是非常便利的。

   当然，这也并不是说 cookie 就没什么用，web storage 只能在客户端本地存储数据，如果需要与服务器端进行交互，那么 cookie 还是不可或缺的存在。

4. web storage 的使用方法

   我在这就简单的介绍下，详细的方法可以查看 教程。localStorage和 sessionStorage 的使用方法一样。

   存入数据：

   sessionStorage.setItem("myName","zhou")；

   //第一种写法，setItem里有两个参数：前面的那个是我们存储的数据的名字，后面那个是存储的这个数据的值

   sessionStorage.myName="zhou"；//第二种写法，直接使用 .+"数据名字"存储数据,"="后面是我们存入的这个数据的值。

   读取数据：

   sessionStorage.getItem("myName")；
   sessionStorage.myName；//这两种写法都可以读取到myName这个数据，如果之前没有存入这个数据，那么返回的值是undefined.

   删除数据：
   

   sessionStorage.removeItem("myName")；//可以将myName这条数据从存储的数据中删除。

   清空数据：
   

   sessionStorage.clear();//clear()方法将sessionStorage中的数据全部清空。

5. 总结

   从上面可以看出，web本地存储的功能还是相当强大的，我们可以根据它很方便的实现数据存储。
   

   比如像购物车模块的信息就可以使用web storage 来存储我们需要的一些数据。