js中cookie、localStorage、sessionStorage

HTTP协议是一种无状态协议，基于TCP协议的一种高级协议，用于客户端和服务器之间的通信。

 

问题：无法监听当前连接的状态，会导致每次请求页面，收到页面之后，连接会被断开

 

举例：购物时，登录账号密码，开始挑选商品，连接断卡，重新登陆，加入购物车继续挑选商品时，连接断开，重新登陆，继续选择商品加入购物车，重新登陆......解救剁手

 

解决方法：会话跟踪技术cookie。

注：会话跟踪技术，在一次会话从开始到结束的整个过程，全程跟踪记录客户端的状态（如：是否登录，购物车信息，是否下载，是否点赞，播放进度等等）

 

一、基本概念

　　　 cookie的概念

　　　　cookie(会话跟踪技术)，相当于第一次跟服务器连接后，服务器给你发的一个身份牌，上面可以记录跟你有关的信息（是否登录，购物车等等信息），以后只要再跟服务器通信，必须带着这个令牌，这样一来，服务器会直接知道你身份牌上所有的信息。

　　 　　cookie的特点

　　　　

　　　　1.只能使用文本文件（如果浏览器可以随意在客户端机器生成文件，比如身份令牌，那将是个定时炸弹，安全问题会变得非常严重）

 

　　　　2.文件有大小限制4K（文件若没有大小限制，相当于身份令牌重几百斤，挂在脖子上什么感觉？）

 

　　　　3.数量限制，小于50条（一般浏览器限制大概在50条左右，门禁卡里能存下一部蓝光高清么）

 

　　　　4.读取有域名限制（不可跨域读取，只能由写入cookie的 同一域名 的网页进行读取。简单来说，谁写的cookie，谁才有权利读取）

 

　　　　5.时效限制（每个cookie有时效，最短的有效期是：会话级别(关闭浏览器，cookie销毁)；

　　　localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端。
　　　sessionStorage：指的是针对一个session的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据就被删除。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

特性	Cookie	LocalStorage	SessionStorage
数据的生命周期	一般由服务器生成，可设置失效时间，如果在浏览器端生成cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	会话级，尽在当前会话中有效，关闭浏览器或页面后被清除
存放数据大小	4K左右	一般为20MB	一般为5MB
与服务器通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题（带宽）	尽在客户端(浏览器)中保存,不参与在服务器上的通信
易用性	需自己封装	可以再次封装  对Object和Array有更好的支持
共同点	不安全、不能跨域、不能跨浏览器,写入的都是字符

二、应用场景

　　Cookie

　　　　1.保存上次登录的时间等信息

　　　　2.保存上次查查看的页面

　　　　3.浏览次数

　　Session

　　　　1.网上商城中的购物车

　　　　2.保存用户登录信息

　　　　3.防止用户非法登录

三、操作

　　Cookie

　　　　百度在谷歌浏览器中的cookie

　　　　

//设置
//会话级默认路径
document.cookie = "name=abc";
//cookie的格式要求,名称=值
//在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格这cookie的赋值规则

//指定有效期
//设置cookie的保存时间，通过expires添加一个日期，设置cookie的过期时间
var date = new Date();
//设置过期时间为三天后
date.setDate(date.getDate() + 3);
document.cookie = "name=abc;expires=" + date;
//指定路径
document.cookie = "user=admin;path=/;expires=" + date;

//获取
var str = document.cookie;
//str返回当前cookie的值,以字符串的形式

//删除
//删除cookie，相当于将cookie的有效时间设为负
//eg
date.setDate(date.getDate() - 1);
document.cookie = "user=abc;expires=" + date;

　　LocalStorage和SessionStorage相似（此处以localStorage为例）

//window的属性，返回一个localStorage对象
//对象的属性:
    localStorage.key = value    //设置  修改
    localStorage.key;              //获取
    delete localStorage.key     //删除  localStorage.key = undefined
    for-in localStorage            //枚举  批量删除
//方法
    localStorage.setItem(key,value)   //设置  修改
    localStorage.getItem(key)           //获取
    localStorage.removeItem(key)     //删除一个
    localStorage.clear()                     //删除所有
//事件
window.onstorage检测key 发生了变化,事件对象
     var boxObj = document.getElementById("box");
     onstorage = function(eve){
         var e = eve || window.event;
          boxObj.style.left = JSON.parse(localStorage.getItem(e.key).x) + "px";      
}

部分采用

https://blog.csdn.net/weixin_40979567/article/details/93891171