总结:每个浏览器都有一定数量限制的cookie。每个浏览器中,每一个cookie都有一个path路径,指向请求访问的网页。

------------------------------------------------------------------------------------------------

1、什么是 cookie?

2、通过 JavaScript:创建  /读取 /改变  /删除 cookie

3、Cookie 字符串

4、JavaScript Cookie 实例 :设置  /获取  /检测 cookie 的函数

-----------------------------------------------------------------------------------------------

什么是 cookie?(前提:网页需要用户登陆才能请求访问)

Cookie 是在您的计算机上存储在小的文本文件中的数据。

当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。

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

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

Cookie 保存在名称值对中,如:

username = Bill Gates

当浏览器从服务器请求一个网页时,将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

如果浏览器已关闭本地 cookie 支持,则以下实例均无法工作。

通过 JavaScript 创建 cookie

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

创建 cookie:

document.cookie = "username=Bill Gates";

默认情况下,在浏览器关闭时会删除 cookie。

可以添加有效日期(expires=UTC 时间):

document.cookie = "username=John Doe; expires=Sun, 31 Dec 2017 12:00:00 UTC";

默认情况下,cookie 属于当前页。

通过 path= 参数,您可以告诉浏览器 cookie 属于什么路径。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

通过 JavaScript 读取 cookie

读取 cookie:

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie,比如:cookie1=value; cookie2=value; cookie3=value;

通过 JavaScript 改变 cookie

像你创建 cookie 一样改变它:

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

通过 JavaScript 删除 cookie

删除 cookie 非常简单。

删除 cookie 时不必指定 cookie 值:

直接把 expires= 参数设置为过去的日期即可:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

应该定义 cookie 路径以确保删除正确的 cookie。不指定路径,一些浏览器不会让你删除 cookie。

Cookie 字符串

想找到一个指定 cookie 的值,必须编写 JavaScript 函数来搜索 cookie 字符串中的 cookie 值。

JavaScript Cookie 实例

在下面的示例中,我们将创建一个 cookie 来存储访问者的名称。

访客第一次到达网页时,会要求他填写姓名。然后将该名称存储在 cookie 中。

下次访客到达同一页时,他将收到一条欢迎消息。

例如,我们将创建 3 个JavaScript函数:

  1. 设置 cookie 值的函数
  2. 获取 cookie 值的函数
  3. 检查 cookie 值的函数

设置 cookie 的函数

创建一个函数,将访问者的名字存储在 cookie 变量中:

/*
*cname:cookie 的名字
*cvalue:cookie 的值
*exdays:cookie 过期的天数
*通过把( cookie 名称、cookie 值和过期字符串)相加,该函数就设置了 cookie。
*/
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

获取 cookie 的函数

创建一个函数返回指定 cookie 的值:

/*
*把 cookie 作为参数(cname)。
*创建变量(name)与要搜索的文本(CNAME”=”)。
*解码 cookie 字符串,处理带有特殊字符的 cookie,例如 “$”。
*用分号把 document.cookie 拆分到名为 ca(decodedCookie.split(';'))的数组中。
*遍历 ca 数组(i = 0; i < ca.length; i++),然后读出每个值 c = ca[i]。
*如果找到 cookie(c.indexOf(name) == 0),则返回该 cookie 的值(c.substring(name.length, c.length)。
*如果未找到 cookie,则返回 ""。
*/
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';'); //把cookie分割成组
for(var i = 0; i <ca.length; i++) {
var c = ca[i]; //取得字符串
while (c.charAt(0) == ' ') { //返回在指定位置的字符&&判断一下字符串有没有前导空格
c = c.substring(1); //截取1之后余下所有作为字串&&有的话,从第二位开始取
}
if (c.indexOf(name) == 0) {//在字符串内进行检索,返回第一次出现的位置
return c.substring(name.length, c.length);//提取字符串中介于两个指定下标之间的字符(即“=”和“;”之间的字符)。
}
}
return "";
}
/*
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
*/
//可被以下代码替代
var c = ca[i].trim(); //去除前后空格 (c=ca[i].trim())。

检测 cookie 的函数

/*
*创建检查 cookie 是否设置的函数。
*如果已设置 cookie,将显示一个问候。
*如果未设置 cookie,会显示一个提示框,询问用户的名字,并存储用户名 cookie 365 天,通过调用 setCookie 函数:
*/
function checkCookie() {
var username = getCookie("username");
if (username != "") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}

组合起来

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
} function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
} function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("再次欢迎您," + user);
} else {
user = prompt("请输入姓名:","");
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
</head> <body onload="checkCookie()"></body> </html>

1、JavaScript中的Cookie 用于存储 web 页面的用户信息。的更多相关文章

  1. 4、Servlet中的Cookie 用于存储 web 页面的用户信息。

    Servlet Cookie 处理 Cookie 是存储在客户端计算机上的文本文件,并保留了各种跟踪信息.Java Servlet 显然支持 HTTP Cookie. 识别返回用户包括三个步骤: 服务 ...

  2. 3、JSP中的Cookie 用于存储 web 页面的用户信息。

    cookie 在平时生活中的运用 存储用户在网页上的登陆信息,包括账号和密码. 有的网站,登陆的时候,会出现一个选项,问你是否要一周内或者一个月内保持登陆状态.如果你选了,那么一周之内,都不需要再输入 ...

  3. JavaScript中的Cookie 和 Json的使用

    JavaScript中的Cookie 和 Json的使用 JSON JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.采用的是完全独立于编程语言的文本格式来存 ...

  4. Javascript中关于cookie的那些事儿

    Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什 ...

  5. linux下通过acl配置灵活目录文件权限(可用于ftp,web服务器的用户权限控制)

    linux下通过acl配置灵活目录文件权限(可用于ftp,web服务器的用户权限控制) 发表于2012//07由feng linux 本身的ugo rwx的权限,对于精确的权限控制很是力不从心的,ac ...

  6. day108:MoFang:首页检测用户是否登录&在项目中使用MongoDB&用户页面更新用户信息&交易密码界面实现

    目录 1.首页页面也要检测用户是否登录 2.在flask中使用MongoDB 3.用户页面更新用户信息 4.交易密码界面/密码修改界面/昵称修改界面初始化 5.交易密码实现 1.首页页面也要检测用户是 ...

  7. javascript中的cookie,以及事件解析

    Cookie: 它的意思是在本地的客户端的磁盘上以很小的文件形式保存数据,Cookie的处理原则上需要在服务器环境下运行,目前Chrome不可以在客户端操作Cookie,其他浏览器均可以,   Coo ...

  8. JavaScript中document.cookie

    “某些 Web 站点在您的硬盘上用很小的文本文件存储了一些信息,这些文件就称为 Cookie.”—— MSIE 帮助.一般来说,Cookies 是 CGI 或类似,比 HTML 高级的文件.程序等创建 ...

  9. JavaScript中设置cookie的值

    cookie 与 session 是网页开发中常用的信息存储方式.Cookie是在客户端开辟的一块可存储用户信息的地方:Session是在服务器内存中开辟的一块存储用户信息的地方.JavaScript ...

随机推荐

  1. ASP.NET Core 找不到 npm指令异常

    1.错误再现 利用VS2019预览版创建ASP.NET Core 的单页面Web程序 创建后直接运行,出现如下错误 Ensure that 'npm' is installed and can be ...

  2. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  3. spring-boot下mybatis的配置

    问题描述:spring boot项目想添加mybatis的配置,在src/main/resources目录下新建了mybatis-config.xml文件,在application.propertie ...

  4. OSChina 周一乱弹 —— 为什么人类和人工智能定要一战

    2019独角兽企业重金招聘Python工程师标准>>> Osc乱弹歌单(2018)请戳(这里) [今日歌曲] @小小编辑:推荐歌曲,又失恋了 - 花粥 <又失恋了>- 花 ...

  5. UVA-2【NOI2014】起床困难综合症

    #2. [NOI2014]起床困难综合症 21 世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm 一直坚持与起床困难综合症作斗争.通过 ...

  6. POJ 2777——线段树Lazy的重要性

    POJ 2777 Count Color --线段树Lazy的重要性 原题 链接:http://poj.org/problem?id=2777 Count Color Time Limit: 1000 ...

  7. 配置中心Apollo搭建全过程

    总体架构 用户在Portal操作配置发布 Portal调用Admin Service的接口操作发布 Admin Service发布配置后,发送ReleaseMessage给各个Config Servi ...

  8. [译]ANDROID 11: BETA 计划

    当我们开始计划 Android 11 的时候,我们没有预料到这些变化会发生在我们所有人身上,几乎遍及世界上的每一个地区. 这些挑战要求我们保持灵活性,寻找新的合作方式,特别是与我们的开发者社区合作. ...

  9. Spring Cloud 系列之 Config 配置中心(二)

    本篇文章为系列文章,未读第一集的同学请猛戳这里:Spring Cloud 系列之 Config 配置中心(一) 本篇文章讲解 Config 如何实现配置中心自动刷新. 配置中心自动刷新 点击链接观看: ...

  10. 数学建模(二)优劣解距离法Topsis模型部分

    步骤: (一)统一指标类型:指标正向化(转化为极大型)(论文) 越大越好极大型指标,效益型指标 越小越好极小型指标,成本型指标 max-x,max=max{xi} 落在某个区间[a,b]是最好的,区间 ...