HTML5 Web存储之localStorage和sessionStorage

本文要讲的localStorage和sessionStorage方法都是HTML5中的新方法，也可以完整写成window.localStorage或者window.sessionStorage用于客户端存储数据，两种方法的使用方法是一样的，唯一区别是在存储时效不同。
通过在浏览器上打印这两个方法，我们可以得到它们所有的方法和属性如下：

一：localStorage和sessionStorage特性

localStorage：持久性，没有时间限制的数据存储，代表它可以对数据一直存储着。
sessionStorage：针对一个session（会话）的数据存储，也就是说它可以一直存储数据直到我们将浏览窗口关闭销毁。

二：localStorage和sessionStorage方法

1.直接创建和访问

/*localStorage创建和访问*/localStorage.id='1001';localStorage.id     //'1001'/*sessionStorage创建和访问*/sessionStorage.id='1001';sessionStorage.id   //'1001'

2.localStorage.length和sessionStorage.length（获取存储变量的个数）

localStorage.id='1001';localStorage.length // 1sessionStorage.id='1001';sessionStorage.length   // 1

3.valueOf（获取所有存储的数据）和key（读取第i个数据的名字或称为键值(从0开始计数)）

/*访问所有存储的变量*/localStorage.valueOf();     //localStorage存储的所有变量sessionStorage.valueOf();   //sessionStorage存储的所有变量/*访问固定index值存储的变量*/localStorage.key(0);    //localStorage存储的第一个变量的变量名和值sessionStorage.key(0);  //sessionStorage存储的第一个变量的变量名和值

4.setItem（存储数据）和getItem（读取固定变量名数据）

/*存储字符串或其他基本数据类型*/localStorage.setItem('id','1001');localStorage.getItem('id');)        //'1001'sessionStorage.setItem('id','1001');sessionStorage.getItem('id'));  //'1001'/*localStorage存储JSON对象，sessionStorage同理*/var obj = {    aaa: {         name: "aaa",         age: 10    },     bbb: {          name: "bbb",          age: 11    }}localStorage.setItem("newObj",JSON.stringify(obj));//将转为字符串的JSON变量存到localStorage里console.log(JSON.parse(localStorage.getItem("newObj"))); //转回为JSON对象==>return {aaa:{name: "aaa", age: 10},bbb:{name: "bbb", age: 11}}

5.removeItem（删除某个具体变量）和clear（清空存储的所有数据）

/*removeItem删除某个变量*/localStorage.removeItem('id');localStorage.id     //undefinedsessionStorage.removeItem('id');sessionStorage.id       //undefined/*clear清空所有变量*/localStorage.clear();   //localStorage.length为0sessionStorage.clear();  //sessionStorage.length为0

6.hasOwnProperty（检查是否保存某个变量），propertyIsEnumerable（用来检测属性是否属于某个对象的）和toLocaleString（将（数组）转为本地字符串）

/*hasOwnProperty方法*/localStorage.hasOwnProperty('id') // truesessionStorage.hasOwnProperty('id') // true/*toLocaleString方法*/localStorage.arr = [1,2,3]localStorage.arr.toLocaleString();  //"1,2,3"sessionStorage.arr = [1,2,3]sessionStorage.arr.toLocaleString();    //"1,2,3"