浅谈JS-cookie,你是香甜可口的小点心吗?
引言:
想必大家一定听过或看过浏览器cookie,早在nokia雄霸天下、我们还不太明白浏览器的时候,cookie就已经悄悄地存在于浏览器的“设置选项”中了。当时它的用途仅仅是让你选择是否“清除”。年少的我很纳闷,这“甜点”(cookie在英语中的解释)是什么意思?
光阴如梭,直到接触到web开发才发现自己以前对cookie的理解是多么可笑,哈哈哈。。。
cookie在浏览器中是什么作用呢?果断找度娘,cookie用来存储网站或用户的数据、行为等信息。比如:用户设置网站的主题,网站将相关的数据记录存在cookie中;用户登录帐户后,点击“记住用户名”,可以使用cookie来记录;网站打开有个弹窗,其中有一个“不再提示”的选项,果断 get√,下次打开就不会出现这个弹窗。。。等等的小例子,大家明白其中的作用吧!
揭露秘密的时刻:
我们来看看你的浏览器下 baidu.com 的cookie吧!
聪明的少年们很快就能注意到,cookie是document下的一个方法。根据经验,document.cookie 可以读取浏览器的cookie值,是不也可以添加或设置cookie值呢?
(注意点:想在本地测试测试浏览器cookie,推荐使用firefox浏览器,其他浏览器可能没有效果。)
cookie的大小依据不同的浏览器而定,一般为4KB,而且服务器语言如PHP,Java等也能操作cookie。
给网站添加cookie:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
window.onload = function() {
addCookie();
} function addCookie() {
document.cookie = "123=123";
document.cookie = "abc=abc";
}
</script>
</body>
</html>
我们来看看浏览器下的变化吧!
当我们添加cookie是,语句中的 " = " 其实有两个含义:
- 当cookie名称相同是,为覆盖的作用
- 当cookie名称不同时,为添加操作
浏览器下出现了两条cookie记录,每条记录之间以 '; '分隔(记得分号后面必须要有空格)。在firebug展现的表格中有“过期时间”和“最长有效期”两项值得我们注意。
设置cookie的有效期:在添加浏览器cookie时,有这样的一个参数来设置cookie的有效期(也可以叫做过期时间):expires
代码走起:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
window.onload = function() {
setCookie('name', 'value', 10);
} function setCookie(name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
</script>
</body>
</html>
上面的代码可以方便的实现本站点下cookie的创建、修改、删除的功能,那么我们如何获取具体的cookie值呢?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="input" placeholder="获取cookie值" /> <button id="getCookie">获取cookie值</button>
<p id="values"></p>
<script>
window.onload = function() {
setCookie('name01', 'value01', 10);
setCookie('name02', 'value02', 10);
setCookie('name03', 'value03', 10);
setCookie('name04', 'value04', 10); document.getElementById("getCookie").onclick = function(){
var inputValue = document.getElementById('input').value;
document.getElementById('values').innerHTML = '';
if(inputValue!=''){
getCookieValue(inputValue);
}else{
document.getElementById('values').innerHTML = "<span style='color:red;'>输入错误</span>";
}
};
}
function getCookieValue(cName){
var cookieArry = document.cookie.split("; ");
for (var i = 0; i < cookieArry.length; i++) {
var cookieSubArry = cookieArry[i].split("=");
if(cookieSubArry[0]==cName){
document.getElementById('values').innerHTML = cookieSubArry[1];
}
};
} function setCookie(name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
</script>
</body>
</html>
简单分析:
我们使用 document.cookie.split("; "); 来分割获取的cookie记录,在 for 循环中二次切割每一条 cookie记录,这样的话我们就能够轻松地获取想要的啦!
浅谈JS-cookie,你是香甜可口的小点心吗?的更多相关文章
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 浅谈 js 正则字面量 与 new RegExp 执行效率
原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...
- 浅谈 js 字符串之神奇的转义
原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...
- 浅谈 js 正则之 test 方法
原文:浅谈 js 正则之 test 方法 其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...
- 浅谈 js 数字格式类型
原文:浅谈 js 数字格式类型 很多人也许只知道 ,123.456,0xff 之类的数字格式.其实 js 格式还有很多数字格式类型,比如 1., .1 这样的,也有 .1e2 这样的. 可能有人说这是 ...
- 浅谈 js 语句块与标签
原文:浅谈 js 语句块与标签 语句块是什么?其实就是用 {} 包裹的一些js代码而已,当然语句块不能独立作用域.可以详细参见这里<MDN block> 也许很多人第一印象 {} 不是对象 ...
- 浅谈 js 字符串 trim 方法之正则篇
原文:浅谈 js 字符串 trim 方法之正则篇 关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格 等 ...
随机推荐
- [转载]对iOS开发中内存管理的一点总结与理解
对iOS开发中内存管理的一点总结与理解 做iOS开发也已经有两年的时间,觉得有必要沉下心去整理一些东西了,特别是一些基础的东西,虽然现在有ARC这种东西,但是我一直也没有去用过,个人觉得对内存操作 ...
- react系列(三)组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
- Servlet Struts2 SpringMVC 获取参数与导出数据 方法比较
servlet中通过request.getParameter()从网页获取参数 通过request session servletContext几个域对象的setAttribute(String ,O ...
- SpringBoot整合Mybatis,TypeAliases配置失败的问题
SpringBoot整合Mybatis,TypeAliases配置失败的问题 问题描述 在应用MyBatis时,使用对象关系映射,将对象和Aliase映射起来. 在Mybatis的文档明确写出,如果你 ...
- 【读书笔记 - Effective Java】04. 通过私有构造器强化不可实例化的能力
工具类(utility class)不希望被实例化,比如只包含静态方法和静态域的类.为了这个目的,需要让这个类包含一个私有构造器. // 私有构造器示例 public class UtilityCla ...
- JavaScript 中 this 的原理
一.问题 学习 JavaScript 其中一个标志就是理解下面两种写法,会输出有不一样的结果. var obj = { foo: function () {} }; var foo = obj.foo ...
- 关于CoreLocation定位服务的简单使用
在我们发微博,发表空间内容,以及在朋友圈发表动态的时候,会发现有一个位置信息的控件.iOS中是如何定位我们的位置信息的呢?基于此写一个小Demo,供大家参考使用. 在iOS中,用于定位时需要我们导入以 ...
- 爬取豆瓣电影Top250
1 import json import requests from requests.exceptions import RequestException import re import time ...
- 【淘宝客】PHPMailer-v6.0.5版 发送邮件dome
话不多说,根据官方dome修改下,官方更新地址:https://github.com/PHPMailer/PHPMailer <?php use PHPMailer\PHPMailer\PHPM ...
- Java学习笔记十六:Java中的构造方法
Java中的构造方法 1.使用new+构造方法 创建一个新的对象: 2.构造方法是定义在Java类中的一个用来初始化对象的方法: 3.构造方法与类同名且没有返回值: 4.语法格式: public 构造 ...