JavaScript中Cookie的使用之如何设置失效时间

目录
  • 1.什么是Cookie？
    • 1.1简介
    • 1.2特点
  • 2.JavaScript操作Cookie
    • 2.1基础操作
    • 2.2设置失效时间
  • 总结

1.什么是Cookie？

1.1简介

主要用于存储访问过的网站数据，存储浏览器的信息到本地计算机中，用于客户端和服务器端的通讯

Cookie 是为了解决“如何记住用户信息”而发明的：

  • 当用户访问网页时，他的名字可以存储在 cookie 中。
  • 下次用户访问该页面时，cookie 会“记住”他的名字。

注意:如果浏览器完全禁止cookie,大多数网站的基本功能都将无法正常使用，chrome浏览器不支持本地文件的cookie的读取

1.2特点

  • 以文本形式保存(.txt)
  • cookie存储信息不安全（不能存放重要的信息）
  • cookie中有域（domain）和路径的概念,浏览器是一个比较安全的环境，所以不同的域之间不能直接访问（js的同源策略限制）

2.JavaScript操作Cookie

2.1基础操作

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

document.cookie='name=托马'
console.log(document.cookie)

Cookie的常用属性：

  • name cookie的名字(键)
  • value cookie存放的值
  • expires：指cookie过期的时间（该时间为世界时间  UTC时间）也称为格林威治时间
  • max-age:指cookie最大的存活有效期（单位：秒）
  • domain: 指的是cookie当前的域
  • path:指cookie当前的路径
  • size:指cookie存放的大小
  • secure:指cooke的安全属性

注意：expires和max-age的默认值为session代表关闭浏览器，该cookie则清空、失效

2.2设置失效时间

需求：设置一个60分钟后失效的Cookie

function setCookie(name,val,min){
    var now=new Date();
    //设置时间
    now.setMinutes(now.getMinutes()+min)

    //设置Cookie
    document.cookie=name+'='+val+';expires='+now.toUTCString()
}
setCookie('托马','火',60)

控制台显示的失效时间

系统当前时间：

一个小时候的时间应该为16:55，但控制台输出的是08:55,因为这个时间是世界时间 （UTC时间），也称为格林威治时间。

百度一下查得：

所以8:55+8:00=16:55，我们设置的失效时间成功。

提前清除缓存：

function setCookie(name,val,min){
   var now=new Date();
      //设置时间
      now.setMinutes(now.getMinutes()+min)

      //设置Cookie
      document.cookie=name+'='+val+';expires='+now.toUTCString()
  }
  setCookie('托马','火',1)

//通过一次性定时器提前清除Cookie
setTimeout(function(){
	setCookie('托马','',-1)
},3000)
//	setCookie('托马','',-1)
//第一个参数一定要对应，不然找不到这个Cookie
//第二个参数可写可不写
//第三个参数设置为-1

演示结果：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript cookie与session的使用及区别深入探究

    JavaScript cookie与session的使用及区别深入探究

    目录 1. cookie 1.1 什么是cookie 1.2 KOA中使用cookie 1.3 expires和maxAge 1.4 浏览器端设置和删除cookie 2. session 2.1 什么是session 2.2 koa中使用session 3. cookie和session的区别 4. cookie和session的使用场景 1. cookie 1.1 什么是cookie cookie是解决http无状态的一种方案. 服务端与服务端经过三次握手后建立连接,数据发送完后连接关闭,在之

  • JS前端操作 Cookie源码示例解析

    目录 引言 源码分析 使用 源码 分析 set get remove withAttributes & withConverter 总结 引言 前端操作Cookie的场景其实并不多见,Cookie也因为各种问题被逐渐淘汰,但是我们不用Cookie也可以学习一下它的思想,或者通过这次的源码来学习其他的一些知识. 今天带来的是:js-cookie 源码分析 使用 根据README,我们可以看到js-cookie的使用方式: // 设置 Cookies.set('name', 'value'); //

  • JS+cookie实现购物评价五星好评功能

    本文实例为大家分享了JS+cookie实现购物评价五星好评功能的具体代码,供大家参考,具体内容如下 案例实现的是购物评价中五星点评功能. 通过JS面向对象方法实现 利用cookie实现历史点评保存的功能,在下一次打开页面仍保存上一次点评效果. 具体html,js代码如下: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <

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

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

  • 详解javascript如何在跨域请求中携带cookie

    详解javascript如何在跨域请求中携带cookie

    目录 1.搭建环境 2.测试同源cookie 3.跨域请求携带cookie 4.总结 5.知识点 1. 搭建环境 1.生成工程文件 npm init 2.安装 express npm i express --save 3.新增app1.js,开启服务器1 端口:3001 const express = require('express') const app = express() const port = 3001 // 设置`cookie` app.get("/login", (r

  • JavaScript实现cookie的操作

    cookie 用于存储 web 页面的用户信息. 一.什么是 Cookie? Cookie 是一些数据, 存储于你电脑上的文本文件中. 当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息. Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 当用户访问 web 页面时,他的名字可以记录在 cookie 中. 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录. Cookie 以名/值对形式存储,如下所示: usernam

  • JavaScript中Cookie的使用之如何设置失效时间

    目录 1.什么是Cookie? 1.1简介 1.2特点 2.JavaScript操作Cookie 2.1基础操作 2.2设置失效时间 总结 1.什么是Cookie? 1.1简介 主要用于存储访问过的网站数据,存储浏览器的信息到本地计算机中,用于客户端和服务器端的通讯 Cookie 是为了解决“如何记住用户信息”而发明的: 当用户访问网页时,他的名字可以存储在 cookie 中. 下次用户访问该页面时,cookie 会“记住”他的名字. 注意:如果浏览器完全禁止cookie,大多数网站的基本功能都

  • javascript 中Cookie读、写与删除操作

     javascript 中Cookie读.写与删除操作 前言: 在这个前端横行的时候,页面之间的交互需要数据的传递,有的数据通过url传参的形式可以很好地解决,但是对于部分需要改变的参数,你如说从页面A到页面B选择数据,然后从页面B将数据再传到页面A(典型的栗子就是收货地址的选择),针对这一块我是通过存储cookie来解决的. 对于cookie的操作我给出了一些简单的封装,当然也借鉴了前辈们经验,自己糅合了一下,对于cookie的操作,无非是读写和删除,我们首先来看一下写的操作,有写才有读,进而

  • JavaScript中cookie工具函数封装的示例代码

    一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo

  • javascript中cookie对象用法实例分析

    本文实例讲述了javascript中cookie对象用法.分享给大家供大家参考.具体如下: 属性 name          唯一必须设置的属性,表示cookie的名称 expires       指定cookie的存活周期,如不设置,浏览器关闭自动失效 path           决定cookie对于服务器对于其他网页的可用性,一般情况下,   cookie对同一目录下的所有页面都可用,当设置path属性后,cookie只对指定路径及子路径下的所有网页有效 domain           

  • JavaScript中Cookie操作实例

    JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cookie数据). Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取. Cookie文件的格式: NS:Cookie.txt IE:用户名@域名.txt 有两种类型的cookie: (1)持久性cookie,会被存储到客户端的硬盘上. (2)会话Cookie:不

  • cookie在javascript中的使用技巧以及隐私在服务器端的设置

    读取cookie字符串方法: 复制代码 代码如下: alert(document.cookie); 一个网站的cookie字符串包含了该站点域名下的所有cookie(javascript 可访问的,不包括 httponly 的cookie ),多个cookie之间用分号和一个空格隔开,最多一般是 20个或50个,例如,包含2个cookie的字符串格式为 复制代码 代码如下: document.cookie = "key1=value1; key2=value2" 一个cookie字符串

  • JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍

    cookie是网站设计者放置在客户端(浏览器)的小文本文件,cookie不仅能够实现保存密码功能,还可以通过cookie保存最近浏览记录增加用户体验. 在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"

  • 详谈javascript中的cookie

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由JavaScript对其进行控制,而并不是JavaScript本身的性质. cookie概述 在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的, 尽管这样能达到一个模拟 全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新]命令,则所有的JavaSc

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

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

  • 关于Javascript中document.cookie的使用

    设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; 如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如: document.cookie="userId=828; userName=hulk"; 在cookie的名或值中不能使用分号(;).逗号(,).等号(=)以及空格. 在cookie的名中做到这点很容易,但要保存的值是不确定的

随机推荐