JavaScript cookie原理及使用实例


Posted in Javascript onMay 08, 2020

什么是cookie?

cookie 是本地计算机的临时存储。

作用:在浏览器中进行数据的存储,用户名、密码(比如:保存页面信息,自动登录等)。

特点:

  • cookie需要在服务器环境下运行;
  • cookie的容量在4kb左右,限制为每个域名50个cookie个数(IE),不同浏览器容量和个数不同;
  • cookie以字符串类型存储,不同域名存储的数据是无法共享;
  • cookie默认是临时存储的,当浏览器关闭时,自动销毁;
  • cookie可以被禁用也可以删除,且安全性不高。
  • 可以对cookie值进行加密(MD5);

读取和设置cookie

document.cookie = "user=123456";
console.log(document.cookie); //user=123456

使用f12查看当前页面存储的cookie

JavaScript cookie原理及使用实例

注意:

在打开网址时或者提交表单时自动裹挟着cookie数据发送到服务器,并且服务端程序可以 继续裹挟着新的cookie内容存储在你的电脑的cookie中。

设置cookie的生存期

格式:document.cookie = “名称=值;expires=” + 时间;(时间必须是一个字符串)。

var date=new Date();
date.setHours(date.getHours()+1);//设置1小时的生存期
// document.cookie="a=3"; //先存入a=3,只运行第一次
console.log(document.cookie);
var a=Number(document.cookie.split("=")[1]);
a++;
document.cookie="a="+a+";expires="+date.toUTCString();

上面代码表示:设置cookie在当前时间的一个小时后过期,第一次运行先存入a为3的值,然后把cookie的值从字符串转为数值型,再进行累加,每次设置生存期都要把data对象转为字符串类型(toUTCString)。

在生存期内的cookie,关闭页面不会销毁,生存期结束,关闭页面销毁cookie;

cookie存储多个数据

var obj={
      user:"xietian",
      age:30,
      sex:"男"
    }
    function setCookie(obj,date){
      for(var prop in obj){
        document.cookie=prop+"="+obj[prop]+(date ? ";expires="+date.toUTCString() : "");
      }
    }
    var date=new Date();
    date.setFullYear(2021); 
    setCookie(obj,date);

使用reduce获取多个cookie值

var o=getCookie();
   console.log(o);
    function getCookie(){
      return document.cookie.split("; ").reduce((value,item)=>{
          var arr=item.split("=");
          value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);//数字(年龄)需要转为数值型
          return value;
      },{});
    }

关于cookie安全

XSS攻击:XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序(百度百科)。

XSS攻击需要具备的条件:

1. 必须是同一个域当中页面的表单提交,必须有文本内容提交

2. 提交的内容需要被放置在页面中,例如评论等内容

3. 在提交的文本中出现script标签,并且这个标签没有被替代,直接放入在页面中

4. 这个页面可以被所有用户查看到

5. 这个script标签具备一定的盗窃cookie特征

解决办法

提交页面时将script标签过滤再提交;

但可以通过插入图片的超链接,点击是执行JavaScript脚本; 遇到这种时就需要将JavaScript脚本替换

关于cookie安全还要其他攻击方式这里只简单介绍一下cookie,深入了解请上网查询资料。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
JavaScript中的各种宽高属性的实现
May 08 #Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
VSCode搭建React Native环境
May 07 #Javascript
Javascript查看大图功能代码实现
May 07 #Javascript
用VsCode编辑TypeScript的实现方法
May 07 #Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 #Javascript
You might like
php allow_url_include的应用和解释
2010/04/22 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
js获取变量
2006/08/24 Javascript
学习js所必须要知道的一些
2007/03/07 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python删除文件示例分享
2014/01/28 Python
python实现绘制树枝简单示例
2014/07/24 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
Python获取邮件地址的方法
2015/07/10 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
英国书籍、CD、DVD和游戏的第一道德零售商:Awesome Books
2020/02/22 全球购物
咖啡厅创业计划书范本
2014/01/22 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
MySQL数据库超时设置配置的方法实例
2021/10/15 MySQL