html5 本地存储

前言：

    最近在做项目时遇到了需要将数据存储在用户浏览器本地的需求，经过查询了解到了web storage，通过学习初步掌握了web storage，以下是一些关于web storage的知识和用法，记忆力较差发布在csdn备忘。

1：什么是html5本地存储？

    通过web storage ，web应用程序能够在用户浏览器中对数据进行本地存储。在HTML5之前，本地存储是通过cookie来完成的，但cookie并不适合大量的数据存储，因为他们由每个对服务器的请求来传递，速度慢效率不高，会影响网站性能。而web storage克服了cookie的一些缺点，相比cookie更加快速，安全，方便。

    web storage通过键值对的方式存储（可以存储数组，对象，json，style，script等任何可以序列化的字符串），分为：localStorage方法和sessionStorage方法。两种方法可以使用的API是相同的。

2：常用的通用API：

•     setItem(key,value)：设置记录
•     getIem(key)：获取记录
•     key(index)：获取某个索引对应的key,index为索引
•     removeItem(key)：删除单个记录
•     clear：清空所有记录
•     length：获取所有记录个数

           注：setItem()方法若key已存在则更新key值，若key不存在则创建该本地数据。

3：localStorage方法：

    localStorage方法存储的数据没有时间限制，在浏览器关闭时不会被清除，永久存储，永不失效，除非手动删除。

•     localStorage存储数据例子：localStorage.setItem('aboutofMusic','星月神话');
•     localStorage取回数据例子：localStorage.getItem("aboutofMusic");
•     localStorage删除单个记录例子：localStorage.removeItem("aboutofMusic");
•     localStorage清空所有记录例子：localStorage.clear();
•     localStorage取回某索引的key：localStorage.key(0);  //返回值：存入的第一个数据的key
•     获取所有localStorage的个数：localStorage.length;

4：sessionStorage方法：

    sessionStorage方法见名知意是针对一个session进行数据存储，sessionStorage的生命周期为：当前当前窗口页或标签页，一旦该窗口页或者标签页被关闭，那么浏览器就用删除相应的 sessionStorage。

    sessionStorage的API和localStorage的API及其用法相同，见上。

5：遍历所有的数据

for(var i=0;i<localStorage.length;i++){
	console.log(localStorage.key(i));
	console.log(localStorage.getItem(localStorage.key(i)));
}