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有更好的支持
共同点	不安全、不能跨域、不能跨浏览器,写入的都是字符

二、应用场景

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

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

　　　　3.浏览次数

　　Session

　　　　1.网上商城中的购物车

　　　　2.保存用户登录信息

　　　　3.防止用户非法登录

三、操作

　　　　百度在谷歌浏览器中的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

来源：oschina

链接：https://my.oschina.net/u/4293959/blog/3410176

标签

html5

eve

javascript