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字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
AngularJS基础 ng-keydown 指令简单示例
Aug 02 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
js实现登录时记住密码的方法分析
Apr 05 Javascript
vue实现图书管理系统
Dec 29 Vue.js
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基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
JS 控制CSS样式表
2009/08/20 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
python虚拟环境virualenv的安装与使用
2016/12/18 Python
Python中pillow知识点学习
2018/04/30 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
汉语专业应届生求职信
2013/10/01 职场文书
农业大学毕业生的个人自我评价
2013/10/11 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
高三地理教学反思
2014/01/11 职场文书
单位介绍信范文
2014/01/18 职场文书
2015年教务工作总结
2015/05/23 职场文书
2015年女工委工作总结
2015/07/27 职场文书
高质量“欢迎词”
2019/04/03 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python