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 attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
jquery live()调用不存在的解决方法
Feb 26 Javascript
jQuery实现html表格动态添加新行的方法
May 28 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JavaScript 数组运用实现代码
2010/04/13 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
详解关于webpack多入口热加载很慢的原因
2019/04/24 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
pandas 条件搜索返回列表的方法
2018/10/30 Python
DRF跨域后端解决之django-cors-headers的使用
2019/01/27 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
交心谈心活动总结
2015/05/11 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
技术转让协议书
2016/03/19 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
python实现双向链表原理
2022/05/25 Python