一、sessionStorage 、localStorage 和 cookie 之间的区别

-共同点：
都是保存在浏览器端，且同源的。
-区别：
1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会
自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标
识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏
览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5.Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6.Web Storage 的 api 接口使用更方便

注意：
1.同源"指的是"三个相同"。
－协议相同
－域名相同
－端口相同
举例来说：
http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）。
它的同源情况如下。
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
2.目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换

二、sessionStorage与页面 js 数据对象的区别

页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。
而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没
有关闭，加载新页面或重新加载，数据仍然存在。

三、localStorage的使用

首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性
if(！window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
     //主逻辑业务
}

3.1 localStorage的写入有三种方法，这里就一一介绍一下

if(！window.localStorage){
        alert("浏览器不支持localstorage");
        return false;
}else{
        var storage=window.localStorage;
        //写入a字段
        storage["a"]=1;
        //写入b字段
        storage.b=2;
        //写入c字段
        storage.setItem("c",3);
        console.log(typeof storage["a"]);
        console.log(typeof storage["b"]);
        console.log(typeof storage["c"]);
}

运行后的结果如下：

image.png

这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

最后在控制台上面打印出来的结果是:

image.png

注意:刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

3.2 localStorage的读取

if(!window.localStorage){
  alert("浏览器不支持localstorage");
}else{
  var storage=window.localStorage;
  //写入a字段
  storage["a"]=1;
  //写入b字段
  storage.b=2;
  //写入c字段
  storage.setItem("c",3);
  console.log(typeof storage["a"]);
  console.log(typeof storage["b"]);
  console.log(typeof storage["c"]);
  //第一种方法读取
  var a=storage.a;
  console.log(a);
  //第二种方法读取
  var b=storage["b"];
  console.log(b);
  //第三种方法读取
  var c=storage.getItem("c");
  console.log(c);
}

这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取

3.3 localStorage的修改

if(!window.localStorage){
  alert("浏览器不支持localstorage");
}else{
  var storage=window.localStorage;
  //写入a字段
  storage["a"]=1;
  //写入b字段
  storage.b=2;
  //写入c字段
  storage.setItem("c",3);
  console.log(storage.a);
  // console.log(typeof storage["a"]);
  // console.log(typeof storage["b"]);
  // console.log(typeof storage["c"]);
  /*分割线*/
  storage.a=4;
  console.log(storage.a);
}
这个在控制台上面我们就可以看到已经a键已经被更改为4了

3.4 localStorage的删除
3.4.1 将localStorage的所有内容清除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

image.png

3.4.2 将localStorage中的某个键值对删除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

image.png

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
使用key()方法，向其中出入索引即可获取对应的键

image.png

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式
这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

if(!window.localStorage){
alert("浏览器不支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

image.png