[TOC]
本文根据网络资料整理
一、Cookie
Cookie定义
数据存储到计算机中,通过浏览器控制添加与删除数据
Cookie的特点
- 不同的浏览器存放的cookie位置不一样,也是不能通用的
- cookie的存储是以域名形式进行区分的
- cookie的数据可以设置名字的.
- 一个域名下存放的cookie的个数是有限制的,不同的浏览器存放的个数不一样
- 每个cookie存放的内容大小也是有限制的,不同的浏览器存放大小不一样。4KB左右
Cookie分类
- Cookie分7中,分别为
sessionCookie、PersistentCookie、secureCookie、superCookie、HtttOnlyCookie、3rd-party cookie和zombie cookie(僵尸cookie) - 参考
Cookie分几种-----简书
Cookie读取与写入
我们通过document.cookie来获取当前网站下的cookie的时候,得到的字符串形式的值,他包含了当前网站下所有的cookie。他会把所有的cookie通过一个分号+空格的形式串联起来
Cookie过期时间
如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间
TIPS:cookie默认是临时存储的,当浏览器关闭进程的时候自动销毁
Cookie库和引用文件
- cookie---MDN
MDN上的定义,用处不大 - cookie在前端中的实践
挺全的讲解 - cookie---npm
一个cookie库 - express中的cookie与session
Cookie一般是在服务端设置的
二、session
缘起
Http是一种无状态的协议
定义
- session保存在数据库、集群、内存和文件(默认)中。
- cookie保存在硬盘、内存中
cookie和session区别
- Cookie客户端,Session服务端
- Cookie是用来保存用户信息的一种机制,也是实现Session的一种方式
- 如果浏览器禁用Cookie,可用通过url传递session_id
- 参考
cookie和webStorage的区别
- cookie与服务端通信,storage不通信
- cookie存放数据4k左右,storage则5M左右
参考
如果cookie被篡改怎么办
- 服务器设置一个secret签名
- cookie是铭文传输,因为cookie只放一个sessionid,
而session敏感信息存放在服务端。
参考
Cookie的实现机制和防篡改机制
三、Storage
两种类型
- sessionStorage
sessionStorage---MDN
session临时回话,从页面打开到页面关闭的时间段
窗口的临时存储,页面关闭,本地存储消失 - localStorage
永久存储(可以手动删除数据)
共同点
- 存储量限制 ( 5M )
- 客户端完成,不会请求服务器处理
- sessionStorage数据是不共享、 localStorage共享
不同点
sessionStorage会在回话结束后消失,
localStorage不会。
Storage API
- setItem():
设置数据,key\value类型,类型只能是字符串
可以用获取属性的形式操作(注意类型转换)//键值对 window.sessionStorage.setItem('name',aInput[3].value);
- getItem():
获取数据,通过key来获取到相应的value(注意类型转换)
//属性的形式操作 window.localStorage.name=aInput[3].value; window.localStorage[name]=aInput[3].value;
- removeItem():
删除数据,通过key来删除相应的value
- clear():
删除全部存储的值
- key():获取所有的key,可以在不知道有哪些键值的时候使用
存储事件storage
当数据有修改或删除的情况下,就会触发storage事件
- 在对数据进行改变的窗口对象上是不会触发的
例如:同步购物车------cnblogs - 回调函数
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
参数ev的属性如下:
- Key : 修改或删除的key值,如果调用clear(),key为null
- newValue : 新设置的值,如果调用removeStorage(),key为null
- oldValue : 调用改变前的value值
- storageArea : 当前的storage对象
- url : 触发该脚本变化的文档的url
注:session同窗口才可以
storage应用
- 页面刷新计数器
- 保存用户名或者电话
- vue-storage
保存意外退出未来得及提交的注册信息
优秀的storage库
- store2
store.js 一个非常棒的处理localStorage的轮子,原生localStorage只支持存储字符串类型,轮子进行封装后可以直接存储Array、Object、function、Set等类型