HTML5 WEB存储

HTML5 WEB存储 是一个比cookie 更好的本地存储方式。

一、定义：

数据以键/值 对存在，web网页的数据只允许改网页访问使用。

二、分类：

客户存储数据的两个对象为：

localStorage对象:本地存储，用于长期保存网站的数据，并且在站内任何页面访问该数据（永久保存，永不失效，除非手动删除。)

sessionStorage对象: 回话存储， 用于临时保存针对一个窗口（或标签页）的数据。在访问关闭窗口或者标签页之前，这些数据是存在的。而关闭之后就会被浏览器删除。

二者区别：

①、数据保存的寿命；

②、本地存储主要用来保存访客将来还能看到数据；

③、会话存储则是用于保存那些需要从一个页面传递给下一个页面的数据。

三、使用：

API:localStorage与 sesstionStorage使用的API相同

localStorage对象:大多数浏览器都把本地存储限制为5MB以下（以域名为单位）。

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key: localStorage.key(index);

sessionStorage对象：

sessionStorage方法 针对一个session 进行数据存储。当用户关闭浏览器窗口，数据会被删除。

使用方法:

sessionStorage.setItem(key,value);

sessionStorage.getItem(key);

四、本地存储与cookie存储的区别

①、cookie在浏览器和服务器之间来回传递，而localStorage和sessionStorage不会自动把数据发给服务器，仅在本地保存。

②、cookie数据还有路径的概念，可以限制cookie只属于某个路径下，存储大小限制也不同， cookie数据不能超过4k,同时，因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据，如会话标识。

③、数据有效期不同，cookie只在设置的cookie过期时间之前一直有效。即使窗口或浏览器关闭。

④、作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。