JavaScript cookie原理及使用实例

什么是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

注意：

在打开网址时或者提交表单时自动裹挟着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，深入了解请上网查询资料。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js使用cookie实现记住用户名功能示例

    本文实例讲述了js使用cookie实现记住用户名功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net cookie记住用

  • 利用js-cookie实现前端设置缓存数据定时失效

    一.背景 业务需要在前端进行数据的缓存,到期就删除再进行获取新数据. 二.实现过程 前端设置数据定时失效的可以有下面2种方法: 1.当数据较大时,可以利用localstorage,存数据时候写入一个时间,获取的时候再与当前时间进行比较 2.如果数据不超过cookie的限制大小,可以利用cookie比较方便,直接设置有效期即可. 3.更多(请大神指点) 利用localstorage实现 localstorage实现思路: 1.存储数据时加上时间戳 在项目开发中,我们可以写一个公用的方法来进行存储的

  • nodejs 使用http进行post或get请求的实例(携带cookie)

    安装http nmp install http 函数封装(可直接拿去进行使用) var http = require('http'); function nodePostGetRequest(HOST, PORT, method, bodydata, callBackFunction, path, cookie) { //把将要发送的body转换为json格式 var body = bodydata; var bodyString = JSON.stringify(body); //http 头

  • 通过jquery.cookie.js实现记住用户名、密码登录功能

    Cookies 定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.cookie.js: 下载:http://plugins.jquery.com/cookie/ <script type="text/javascript" src="js/jquery.min.js"></script> <sc

  • JS使用cookie保存用户登录信息操作示例

    本文实例讲述了JS使用cookie保存用户登录信息.分享给大家供大家参考,具体如下: 通常cookie和session,是web开发中用于存储信息的对象,session存在于服务器的内存中,而cookie则是存在客户端,所以js可以直接操作cookie进行信息的存储和读取. js存放cookie一般的写法,如:document.cookie="userName=admin";,如果是多个键值对:document.cookie="userName=admin; userPass

  • JavaScript创建、读取和删除cookie

    JavaScript创建、读取和删除cookie

    Cookie 为 Web 应用程序保存用户相关信息提供了一种有用的方法.例如,当用户访问咱们的站点时,可以利用 Cookie 保存用户首选项或其他信息,这样,当用户下次再访问咱们的站点时,应用程序就可以检索以前保存的信息. Cookie 是什么鬼 Cookie 是一小段文本信息,伴随着用户请求和页面在 Web 服务器和浏览器之间传递.用户每次访问站点时,Web 应用程序都可以读取 Cookie 包含的信息. Cookie的出现是为了解决保存用户信息的问题.例如 当用户访问网页时,用户的名字可以存

  • 轻量级JS Cookie插件js-cookie的使用方法

    Cookie是网站设计者放置在客户端的小文本文件,一般后台语言使用的比较多,可以实现用户个性化的一些需求.js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级.js-cookie也支持npm和Bower安装和管理.下面看看js-cookie的具体用法. A simple, lightweight JavaScript API for handling cookies Works in all browsers Accepts any character H

  • JavaScript cookie原理及使用实例

    什么是cookie? cookie 是本地计算机的临时存储. 作用:在浏览器中进行数据的存储,用户名.密码(比如:保存页面信息,自动登录等). 特点: cookie需要在服务器环境下运行: cookie的容量在4kb左右,限制为每个域名50个cookie个数(IE),不同浏览器容量和个数不同: cookie以字符串类型存储,不同域名存储的数据是无法共享: cookie默认是临时存储的,当浏览器关闭时,自动销毁: cookie可以被禁用也可以删除,且安全性不高. 可以对cookie值进行加密(MD

  • JavaScript闭包原理与用法实例分析

    本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 1.与闭包有关的两个概念: 1) 变量的作用域 不带有关键字var的变量会成为全局变量: 在函数中使用关键字var声明的变量是局部变量. 局部变量只有在函数内部才能访问到,在函数外面是访问不到的.但在函数内部可以通过作用域链一直向上搜索直到全局对象,也就是说,函数内部可以访问函数外部的变量. 2) 变量的生存周期 对于全局变量,其生存周期是永久的,除非主动销毁这个全局变量: 而对于在函数内用关键字var声明的局部

  • JavaScript适配器模式原理与用法实例详解

    本文实例讲述了JavaScript适配器模式原理与用法.分享给大家供大家参考,具体如下: 适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 基本理论 适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作. 适配器主要有3个角色组成: (1)客户端:调用接口的类 (2)适配器:用来连接客户端接口和提供服务的接口的类 (3)适配者:提供服务,但是却与客户端接口需求

  • JavaScript观察者模式原理与用法实例详解

    本文实例讲述了JavaScript观察者模式原理与用法.分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. * 它分为2个角色:(1)观察者 (2)被观察者 * 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应. 现在我们通过一个需求来学习该模

  • JavaScript 接口原理与用法实例详解

    本文实例讲述了JavaScript 接口原理与用法.分享给大家供大家参考,具体如下: js接口 意义: 提供一种以说明一个对象应该有哪些方法的手段. 接口是面向对象javascript程序员的工具箱中最有用的工具之一 接口的利弊: 对于一些中小型程序来说 使用接口很显然是不明智的,对项目来说接口的好处也不明显,只是徒增其复杂度而已. 对于接口的好处,那么显而易见 首先促进代码的重用,对于开发来讲,还可以告诉程序员那些类都使用了什么方法,如果你事先知道接口那么就减少了你在编码的时候对类与类之间冲突

  • JavaScript单例模式能不能去实例只留单原理解析

    目录 一.单例模式的分类 二.惰性单例模式 二.普通单例模式 总结 一.单例模式的分类 一个环境中有且只有一个实例,并且当前环境可以访问到它.往小了说,当前环境可以是一个函数作用域.块级作用域,往大了说可以是全局window或者global环境.如果按照实例的创建时机进行单例模式的分类,有: 普通单例模式:在环境初始时就创建 惰性单例模式:在某个特定的时机才创建 二.惰性单例模式 从单例模式的定义出发,一个环境中有且只有一个实例,并且使用时才去创建它,那么就可以把当前单例模式称之为惰性单例模式

  • JavaScript cookie详解及简单实例应用

    JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

  • javascript cookie用法基础教程(概念,设置,读取及删除)

    本文实例讲述了javascript cookie用法.分享给大家供大家参考,具体如下: 一.什么是 cookie? cookie 就是页面用来保存信息,比如自动登录.记住用户名等等. 二.cookie 的特点 同个网站中所有的页面共享一套 cookie cookie 有数量.大小限制 cookie 有过期时间 三.如何使用 cookie? 通过 document.cookie 来写入 cookie <!DOCTYPE HTML> <html lang="en-US"&

  • 设置cookie指定时间失效(实例代码)

    实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> // 设置cookie在当天指定时间点过期并提示 function setCookie(name,value,Deadline){ // 获取当前日期对象 var curD

  • JavaScript cookie 跨域访问之广告推广

    JavaScript cookie 跨域访问之广告推广

    在实际应用中, 跨域使用天气预报组件可以使用上面的方式实现,另外一种常用的就是显示某些电商的广告,此广告中会滚动您访问过的产品或者关联想推介给你的产品. 比如在某个A网页中显示了两种广告: 某东的广告,里面显示的东西,都是访问过滴,并且加推了相关的东西 某宝的广告,基本一样呈现方式. 当访问某东某宝的商品时,会把信息放到cookie中,呈现时会根据cookie中的商品信息进行呈现. 问题来了. A网页所在的站点和某东某宝的站点肯定是独立的两个域名,在A网页中访问某东某宝的cookie是拿不到滴,

随机推荐