sessionStorage，localStorage以及cookies区别

一.localStorage

1.用法

localStorage.setItem:存储数据，接收两个参数。一个是key,一个是value

localStorage.getItem:获取数据，接收1个参数，参数为key,可以获取value

localStorage.removeItem:移除指定数据，接收1个参数，参数为key,移除相应的value

localStorage.clear:移除所有数据，无参数

localStorage.key:获取指定下标的数据，接收1个参数，参数为下标值

localStorage.length:属性，获取缓存总数

获取基本类型（字符串、数值等）

//存储缓存数据
localStorage.setItem("name","jack")
localStorage.setItem("age","17")
// 获取缓存数据
var name =localStorage.getItem("name")
var age=localStorage.getItem("age")
console.log(name,"name")//"jack"
console.log(age,"age")//17
// 获取指定下标的缓存数据
console.log(localStorage.key(0))//获取第一个缓存值
// 获取缓存总数
console.log(localStorage.length)
// 移除指定缓存
localStorage.removeItem("name")//移除name缓存
// 移除所有缓存
localStorage.clear()

获取引用类型（对象，数组等）

           // 获取缓存数据
            localStorage.setItem("data",JSON.stringify({name:"jack",age:18}))
            localStorage.setItem("arr",JSON.stringify([1,2]))
            var data = JSON.parse(localStorage.getItem("data"))
            var arr =JSON.parse(localStorage.getItem("arr"))
            console.log(data)
            console.log(arr)
            // 移除缓存数据
            localStorage.removeItem("data");
            localStorage.removeItem("arr")

 两者在使用上几乎没有区别

2.特点

1. 特性：HTML5新特性
2. 存储位置：localStrorage的存储与会话无关，会永久的保持在本地，除非自动清除，数据存在硬盘
3. 存储大小：存储容量5MB左右
4. 存储方式：存在客户端，不用传到服务器，节省网络资源
5. 共享：相同浏览器，相同域名和端口情况下不同页面可共享localStorsge

二.sessionStorage

1.用法

sessionStorage.setItem:存储数据，接收2个参数，一个是key,一个是value

sessionStorage.getItme:获取数据，接收1个参数，参数为 key，可获取 value

sessionStorage.removeItem：移除指定数据，接收1个参数，参数为 key，移除相应的 value。
sessionStorage.clear：移除所有数据，无参数。
sessionStorage.key：获取指定下标的数据，接收1个参数，参数为 下标值。
sessionStorage.length：属性，获取缓存总数。

获取基本类型（字符串、数值等）

 //存储缓存数据
    sessionStorage.setItem("name","jack");
    sessionStorage.setItem("age",18);
    //获取缓存数据
    var name = sessionStorage.getItem("name");
    var age = sessionStorage.getItem("age");
    console.log(name)//"jack"
    console.log(age)//18
    //获取指定下标的缓存数据
    sessionStorage.key(0);//"jack"。获取第一个缓存值
    //获取缓存总数
    sessionStorage.length;//2 ,一共有 2 个缓存
    //移除指定缓存
    sessionStorage.removeItem("name");//移除name缓存
    //移除所有缓存
    sessionStorage.clear();移除所有缓存

获取引用类型（对象，数组等）

    //存储缓存数据
    sessionStorage.setItem("data",JSON.stringify({name:"jack",age:18}));
    sessionStorage.setItem("arr",JSON.stringify([1,2]);
    //获取缓存数据
    var data= JSON.parse(sessionStorage.getItem("data"));
    var arr= JSON.parse(sessionStorage.getItem("arr"));
    console.log(data)//{name:"jack",age:18};
    console.log(arr)//[1,2];

如果存储的是非基本类型对象，存储的时候需要用JSON.stringify转化，获取的时候也需要通过JSON.parse转义，才能得到对象类型，否则会强制转换为字符串

JSON.stringify() 方法将一个 js 对象或值转换为 JSON 字符串

JSON.parse() 方法将JSON格式字符串转换为js对象,(属性名没有双引号)。

var jstr = '{"name":"wust", "url":"www.wust.edu.cn", "age":120}'
var obj = JSON.parse(jstr);
// 结果 obj= { name:"wust", url:"www.wust.edu.cn", age:120 }

2.特点

1. 特性：HTML5新特性
2. 存储位置：会话关闭，也就是浏览器关闭，sessionStorage缓存会消失，存储在内存中
3. 存储容量：存储容量 5MB 左右；
4. 存储方式：存在客户端，不用传到服务器，节省网络资源；
5. 共享：相同浏览器，相同域名和端口情况下不同页面可共享 sessionStorage 。

三.cookies

1.用法

            // 设置cookie
            document.cookie = "name=jack;"
            // 获取cookie
            var name = document.cookie.split(';')[0].split("=")[1];
            console.log(name)

2.特点

1. 特性：HTML4特性
2. 存储时间：如果不在浏览器中设置过期时间，也就是maxage为负数或者0，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种 cookie 简称会话 cookie。如果在浏览器中设置了 cookie 的过期时间，也就是 maxage 为正数，cookie 就被保存在硬盘中，关闭浏览器后，cookie 数据仍然存在，直到过期时间结束才消失；
3. 存储形式：cookie 只能保存字符串类型，以文本的方式
4. 存储的大小：单个cookie保存的数据不能超过4kb，不能超过20个；

3.缺点

1. 大小和数量有限制，每个 domain 最多只能有 20 条 cookie，每个 cookie 不能超过4KB，否则会被截断；
2. 每次访问都要传送cookie给服务器，浪费带宽；
3. 用户可以操作（禁用）cookie，功能受限；
4. 安全性低，cookie 一旦被劫持，就可以获取用户的 session 信息
5. cookie 需要指定作用域，不可以跨域调用。

四.总结

1. sessionStorage 和 localStorage 储存对象时，需要通过 JSON.stringify() 方法和 JSON.parse() 方法转换一下，否则强制转换为字符串；
2. 目前为止，Firefox3.6 以上、Chrome6 以上、Safari 5 以上、Pera10.50 以上、IE8 以上版本的浏览器支持 sessionStorage 与 localStorage 的使用
3. sessionStorage 和 localStorage (5MB)比 cookies 容量大(4KB)。
4. sessionStorage 和 localStorage 不用上传服务器，节约带宽，而 cookies 需要
5. sessionStorage 和 localStorage 不能被用户手动禁用，而 cookies 会。

6.