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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
详解javascript事件冒泡
Jan 09 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
SONY SRF-M100的电路分析
2021/03/02 无线电
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP单链表的实现代码
2016/07/05 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
Sample script that deletes a SQL Server database
2007/06/16 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python常见排序算法基础教程
2017/04/13 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
PyQt5每天必学之布局管理
2018/04/19 Python
学生信息管理系统python版
2018/10/17 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
学校安全生产承诺书
2014/05/23 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
竞赛口号大全
2014/06/16 职场文书
教师学期个人总结
2015/02/11 职场文书
企业宣传稿范文
2015/07/23 职场文书