h5 本地存储

H5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，JS代码较多，请耐心阅读。

一、Web Storage教程

1、概述：

对于Web Storage来说，实际上是Cookies存储的进化版。如果了解Cookie的人几乎一看Web Storage就会用，如果你从来没用过没了解过Cookie，没关系，看了这篇文章照样轻松玩转Web Storage。首先，学习Web Storage只需背熟这句口诀：“两个接口，四个函数”。

2、口诀：

（1）两个接口：分别是localStorage和sessonStorage

（2）四个函数：分别是setItem、getItem、removeItem和clear

3、localStorage：

（1）特性：

域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。

（2）四个函数：

A. localStorage.setItem      存储数据信息到本地

B. localStorage.getItem      读取本地存储的信息

C. localStorage.removeItem   删除本地存储的信息

D. localStorage.clear        清空所以存储的信息

4、sessonStorage：

（1）特性：

会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。

（2）四个函数：

A. sessionStorage.setItem       存储数据信息到本地

B. sessionStorage.getItem       读取本地存储的信息

C. sessionStorage.removeItem    删除本地存储的信息

D. sessionStorage.clear         清空所以存储的信息

5、四个函数的用法：

（1）localStorage.setItem(键名，键值)

在本地客户端存储一个字符串类型的数据，其中，第一个参数“键名”代表了该数据的标识符，而第二个参数“键值”为该数据本身。如：

localStorage.setItem("coffeeType", "mocha");      //存储键名为coffeeType和键值为mocha的数据到本地
                 localStorage.setItem("coffeePrice", "28");        //有了上一句做参考，这句意思你该理解了吧

（2）localStorage.getItem(键名)

读取已存储在本地的数据，通过键名作为参数读取出对应键名的数据。如：

var data = localStorage.getItem("coffeeType");   //读取对应键名为coffeeType的数据

（3）localStorage.removeItem(键名)

移除已存储在本地的数据，通过键名作为参数删除对应键名的数据。如：

localStorage.removeItem("coffeeType");           //从本地存储中移除键名为coffeeType的数据
     
（4）localStorage.clear()

移除本地存储所有数据。如：

localStorage.clear();      //保存着的"coffeePrice/28"键/值对也被移除了，所有本地数据拜拜

（5）另外，sessionStorage中的四个函数与以上localStorage类的函数用法基本一致，就不再详解。