HTML5 几种本地存储方式 localStorage和sessionStorage的使用方法

1. 什么是本地存储

客户端数据的存储

2. 本地存储可以使用在哪里

* 用户临时登录信息，用户页面配置，当前临时信息

* 一些东西用户想要存起来，下次访问可以继续使用，但是服务器没必要浪费空间来存这些信息，此时就可以应用本地存储，存放在用户本地

3. 本地存储的几种方式

cookie

一般最多只能存储4KB的数据，

每次都会通过HTTP请求把cookie传送回服务器

使用上兼容性广

Web Storage

大约5MB，类似key-value 的存储方式

Web SQL Database

使用SQL语句操作， IE FF不支持

Indexed Database

索引数据库，类似N哦SQL，很强大，支持索引、事务处理和健壮的查询功能

4. Web Storage

4.1 分类

会话存储（session storage）

本地存储（local storage）

4.2 区别：

* 两者不同之处在于

localStorage里面存储的数据没有过期时间设置。

而存储在sessionStorage里面的数据在页面会话结束时会被清除。

* 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

4.3 操作方法

Storage.length 只读属性

返回一个整数，表示存储在Storage对象中的数据项数量。

Storage.key()

接受一个数值 n 作为参数， 并返回存储中的第 n 个键名

Storage.getItem()

该方法接受一个键名作为参数，返回键名对应的值

Storage.setItem()

该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值。

Storage.removeItem()

该方法接受一个键名作为参数，并把该键名从存储中删除。

Storage.clear()

调用该方法会清空存储中的所有键名。

localStorage.setItem('v1','localStorage')
sessionStorage.setItem('v2','sessionStorage')

4.4 总结

* Web Storage 以键/值存储，字符类型的数据

* Web Storage 存储的数据不能跨浏览器

* Web Storage 存储的数据不能跨域

* localStorage 可以在同一个域下多个页面使用，

* sessionStorage 只能在同一个域的同一个页面使用