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

本文实例讲述了javascript cookie用法。分享给大家供大家参考，具体如下：

一、什么是 cookie？

cookie 就是页面用来保存信息，比如自动登录、记住用户名等等。

二、cookie 的特点

同个网站中所有的页面共享一套 cookie

cookie 有数量、大小限制

cookie 有过期时间

三、如何使用 cookie？

通过 document.cookie 来写入 cookie

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>cookie基础</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
document.cookie = 'username=abc';
document.cookie = 'password=123';
document.cookie = 'email=abcdef@123.com';
</script>

打开浏览器查看 cookie，可以发现新定义的 cookie 并不会将原来的覆盖。

如果没有设置过期时间，那么关闭浏览器就会清空 cookie。如何设置过期时间呢？答案是：expires。一般我们会结合 Date 对象来使用。

var d = new Date();
d.setTime(d.getTime() + 1 * 3600 * 1000);
document.cookie = 'username=abc; expires=' + d.toGMTString();

我们可以通过火狐浏览器看到，username 的过期时间是当前时间的 1 小时后。

最后对获取 cookie 的方法进行封装：

function setCookie(name,value,hours){
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}

学会了如何设置 cookie，那么该如何读取 cookie 呢？

首先我们看下 cookie 里的内容是什么类型？

document.cookie = 'username=abc';
document.cookie = 'password=123';
document.cookie = 'email=abcdef@123.com';
typeof document.cookie; //string
alert(document.cookie); //'username=abc; password=123; email=abcdef@123.com'

得到的是一串字符串，需要注意的是，每个 ; 后面都有个空格。

那么我们如何取到具体的数值呢？附上代码：

function getCookie(name){
 var arr = document.cookie.split('; ');
 for(var i = 0; i < arr.length; i++){
 var temp = arr[i].split('=');
 if(temp[0] == name){
  return temp[1];
 }
 }
 return '';
}

除了设置、获取 cookie，我们还可以删除 cookie。我们在网上经常看到有清除用户名这样的功能，其实就是用到了清除 cookie。

清除 cookie 其实很简单，只要使过期时间为过去时间就可以了。

function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + '=1; expires=' + d.toGMTString();
}

最后我们将设置、获取、清除 cookie 封装成一个 cookie.js

function setCookie(name,value,hours){
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + '=' + value + '; expires=' + d.toGMTString();
}
function getCookie(name){
 var arr = document.cookie.split('; ');
 for(var i = 0; i < arr.length; i++){
 var temp = arr[i].split('=');
 if(temp[0] == name){
  return temp[1];
 }
 }
 return '';
}
function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + '=1; expires=' + d.toGMTString();
}

附：这里再补充一个关于cookie的基础应用：javascript cookie记录用户名

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • Java 是如何读取和写入浏览器Cookies的实例详解

    Java 是如何读取和写入浏览器Cookies的实例详解

    首先我们认识下什么是cookies: cookie实际上是一个存在你硬盘里的数据,但是这些数据很特殊,只能由web应用提交给浏览器帮助存储,并且我们还能读取浏览器的cookie web应用一般只在cookie中存储一些用户信息等少量且暂时的数据,数据量大则不适合存储在cookies 一般浏览器对于每个web应用会分别给予他们40个cookie用来存储数据,并且每个cookie的大小不超过4K(听说部分浏览器的cookie能存很大的数据,不过我们一般不会存这么大的数据,因为数据提取的效率不高,影响

  • 谈谈对JavaScript原生拖放的深入理解

    前面的话 拖放(drag-and-drop,DnD)其实是两个动作--拖和放.所以,它涉及到两个元素.一个是被拖的元素,称为拖放源:另一个是要放的目标,称为拖放目标.本文将通过拆分这两个概念来详细介绍原生拖放 拖放源 什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动 图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默认值都是false [注意]必须设置draggable='true'才能生效,只设置dra

  • 在Java下利用log4j记录日志的方法

    1.前言 log4j是一个用Java编写的可靠,快速和灵活的日志框架(API),它在Apache软件许可下发布. Log4j已经被移植到了C,C++,C#,Perl,Python和Ruby等语言中. Log4j是高度可配置的,并可通过在运行时的外部文件配置.它根据记录的优先级别,并提供机制,以指示记录信息到许多的目的地,例如:数据库,文件,控制台,UNIX系统日志等. Log4j中有三个主要组成部分: loggers: 负责捕获记录信息. appenders : 负责发布日志信息,以不同的首选目

  • 使用java实现LIS算法,出操队形的问题

    假设有序列:2,1,3,5,求一个最长上升子序列就是2,3,5或者1,3,5,长度都为3. LIS算法的思想是: 设存在序列a. ① 如果只有一个元素,那么最长上升子序列的长度为1: ② 如果有两个元素,那么如果a[1]>a[0],则最长上升子序列的长度为2,a[1]为该最长上升子序列的最后一个元素;若a[1]<a[0],则最长上升子序列的长度为1,a[0]和a[1]均为  其最长上升子序列的最后一个元素. ③ 如果由三个元素,那么如果a[2]>a[0],a[2]>a[1],则a[

  • javascript实现的左右无缝滚动效果

    本文实例讲述了javascript实现的左右无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍过图片左右滚动,不过图片是间歇性的一张一张滚动,今天介绍的是几张图片一起进行无缝滚动,这是一个常用的 js 效果. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动--左右</title> &

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • javascript实现的上下无缝滚动效果

    本文实例讲述了javascript实现的上下无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍了JS左右无缝滚动效果,现在做下无缝滚动--上下的效果.其他代码和左右的差不多,只是改变的是 offsetTop 的值,并且不需要计算 ul 整体的宽度了. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚

  • Javascript获取图片原始宽度和高度的方法详解

    Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法. 如下: <img id="img" src="1.jpg"> <script type="text/javascript"> var img

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

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

  • javascript 面向对象技术基础教程第1/2页

    javascript中的对象还没解释清楚怎么回事,一上来就直奔主题,类/继承/原型/私有变量.... 结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句

  • [推荐]javascript 面向对象技术基础教程

    结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也 会尽量按照原书的结构来说明javascript的面向对象技术(对象/数组->函数-->类/构造函数/原型).对一些我自己也拿捏不准的地方,我会附上原文的英文语句,供大家参考. 如果不做说明,则文中出现的所有英文语句(程序体除外)都是引自<<javas

  • JavaScript登录验证基础教程

    JavaScript登录验证基础教程

    本文实例为大家分享了js登录验证的具体代码,供大家参考,具体内容如下 1.<script></script>的三种用法: 1.放在<body>中 2.放在<head>中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> &l

  • JavaScript While 循环基础教程

    while 循环 While 循环会在指定条件为真时循环执行代码块. 语法 while (条件) { 需要执行的代码 } 实例 本例中的循环将继续运行,只要变量 i 小于 5: while (i<5) { x=x + "The number is " + i + "<br>"; i++; } 提示:如果您忘记增加条件中所用变量的值,该循环永远不会结束.该可能导致浏览器崩溃. do/while 循环 do/while 循环是 while 循环的变体.

  • javascript cookie操作类的实现代码小结附使用方法

    第一种方法:cookie操作类,代码封装了,下面也有使用方法,大家可以参考下. 复制代码 代码如下: String.prototype.Trim = function() { return this.replace(/^\s+/g,"").replace(/\s+$/g,""); } function JSCookie() { this.GetCookie = function(key) { var cookie = document.cookie; var coo

  • JavaScript实现cookie的写入、读取、删除功能

    在没介绍正文之前,先给大家介绍Cookie的基础知识 首先了解什么是cookie "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值." cookie 是访问过的网站创建的文件,用于存储浏览信息,例如个人资料信息. 从JavaScript的角度看,cookie 就是一些字符串信息.这些信息存放在客户端的计算机中,用于客户端计算机与服务器之间传递信息. 在

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

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

  • JavaScript基础教程——入门必看篇

    JavaScript基础教程——入门必看篇

    JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS

  • Javascript基础教程之比较null和undefined值

    Javascript基础教程之比较null和undefined值

    JavaScript 中有两个特数值: undefined和null,在比较它们的时候需要留心.在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Learn4UndefinedAndNull</title> </head

随机推荐