在web项目中需要的存储主要分为 “服务器存储” 和 “客户端存储” 两部分；这里我们就只是介绍一下 “客户端存储” 这个部分。
简介
首先我们先要了解关于web中的数据存储技术的一个发展历程，第一个web存储技术是Cookie，在百度百科中的说法是：是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。但是这里它会有一个安全隐患，就是Cookie每次都会跟随http请求发送到服务端，也就是说每一个http请求都会带上我们的cookie数据，那么就容易出现一个数据隐患问题。
同时cookie本身也是有很大的局限性的，首先它很小，主流的浏览器最大支持 4096 字节，除了最大字节的限制，每个网站的cookie个数（也就是每一个first每一个域）也是有限制的，一般浏览器是20个。除此之外，cookie还会默认跟随所有http请求发送，即使不需要使用这个cookie来鉴别用户但是它也是会跟随http请求发送的，这样就会造成一个网络资源的浪费。然后部分的浏览器还限制了总的cookie个数300个。
web存储技术除了Cookie以外还有这几种但是都不常用这里就简单提一下：
userData：是IE的59专用特性，用的人较少，现在用的最多的flash的本地存储，空间是cookie的25倍，被淘汰了；
Google Gears ：存储大小没有任何限制，但是需要额外安装插件；
那么在cookie存储技术有这么多的局限性下，同时随着互联网时代的发展，我们1G：语音时代——2G：短信、彩信时代——3G：更快数据传输，视频通话和移动互联网时代——4G现行标准，在这个过程中cookie存储技术已经无法再满足我们的需求。由此，Web Storage应运而生。Web Storage 它解决了很多问题：
比如它支持存储大量数据，支持复杂的本地数据库，而且也不会默认跟随http请求。Web Storage主要是有四个：
- SessionStorage
- LocalStorage
- WebSQL
- indexedDB
下面我们分别的重点介绍一下Web Storage中的SessionStorage和LocalStorage；
一、SessionStorage
储存方式为：key-value的键值对方式，是HTML5新增的一个会话级别的存储对象。
SessionStorage是临时保存在同一窗口，也就是同一标签页的数据。如果当前标签页关闭了，那么SessionStorage也就失效了。这也是SessionStorage最显著的一个特点：单页标签限制。
特点：
- 同源策略，也就是在同一协议，同一主机名和同一端口下的同一tab
- 只在本地存储，不会跟随http请求发送到服务器
- 存储方式采用key-value键值对，这里面的value只能存字符串类型，如果存其他的会自动转换成字符串。
- 存储上线限制达到了5MB，如果当前存储超出上限新的内容会把旧的内容覆盖但不会报错。
属性：
- SessionStroage.length （查看当前存储的数据个数）
- SessionStroage[‘key’] = ‘value’ （存储一个数据）
- var a = SessionStroage[‘key’] （读取一个数据）
- SessionStroage.getItem(‘key’) （读取一个数据）
- SessionStroage.setItem(‘key’,‘value’) （存储一个数据）
- SessionStroage.removeItem(‘key’) （删除指定数据）
- SessionStroage.clear() （ 删除所有数据）
二、LocalStorage
LocalStorage它和SessionStorage十分相似，同样是key-value键值对，同样也是HTML5的新增存储对象，它与SessionStorage的特点不同之处（本地/跨会话存储 ）在于没有标签页的限制和在浏览器的无痕模式下LocalStorage是不允许读取的，永久性的存储，然后SessionStorage超出限制是覆盖不会报错而LocalStorage超出会报错。
特点：
- 同源策略，也就是在同一协议，同一主机名和同一端口下的同一tab
- 没有标签页的限制
- 只在本地存储，不会跟随http请求发送到服务器
- 存储方式采用key-value键值对，这里面的value只能存字符串类型，如果存其他的会自动转换成字符串。
- 存储上线限制达到了5MB，如果当前存储超出上限会报错。
- 无痕模式下不可读取
- 永久性存储
属性：
- localStroage.length （查看当前存储的数据个数）
- localStroage[‘key’] = ‘value’ （存储一个数据）
- var a = localStroage[‘key’] （读取一个数据）
- localStroage.getItem(‘key’) （读取一个数据）
- localStroage.setItem(‘key’,‘value’) （存储一个数据）
- localStroage.removeItem(‘key’) （删除指定数据）
- localStroage.clear() （删除所有数据）