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 // 1
sessionStorage.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     //undefined
sessionStorage.removeItem('id');
sessionStorage.id       //undefined

/*clear清空所有变量*/
localStorage.clear();   //localStorage.length为0
sessionStorage.clear();  //sessionStorage.length为0

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

/*hasOwnProperty方法*/
localStorage.hasOwnProperty('id') // true
sessionStorage.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"