sessionStorage、localStorage 以及 cookies 区别

前言

在前端开发中，往往会将有些不经常更改的数据缓存到本地，比如用户信息。前端本地缓存的方式有多种，比如 sessionStorage、localStorage 以及 cookies 等。那么这个几个缓存有什么区别，各自又有什么特点呢？将是本文分享的重点。

一、sessionStorage

1. 用法
   sessionStorage.setItem：存储数据，接收2个参数，一个是 key，一个是 value。
   sessionStorage.getItem：获取数据，接收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 转义，才能得到对象类型，否则会强制转换为字符串。

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

二、localStorage

1. 用法
   localStorage.setItem：存储数据，接收2个参数，一个是 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",18);
    //获取缓存数据
    var name = localStorage.getItem("name");
    var age = localStorage.getItem("age");
    console.log(name)//"jack"
    console.log(age)//18
    //获取指定下标的缓存数据
    localStorage.key(0);//"jack"。获取第一个缓存值
    //获取缓存总数
    localStorage.length;//2 ,一共有 2 个缓存
    //移除指定缓存
    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)//{name:"jack",age:18};
    console.log(arr)//[1,2];
     //移除缓存数据
    localStorage.removeItem("name");
    localStorage.removeItem("age");

两者在使用上几乎没什么区别。

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

三、cookies

1. 用法

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

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 会。