常用的本地存储-----cookie篇

Posted 2020-08-21 cc_ccc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了常用的本地存储-----cookie篇相关的知识，希望对你有一定的参考价值。

1、引言

随着浏览器的处理能力不断增强，越来越多的网站开始考虑将数据存储在「客户端」，那么久不得不谈本地存储了。

本地存储的好处：

一是避免取回数据前页面一片空白，如果不需要最新数据也可以减少向服务器的请求次数，从而减少用户等待从服务端获取数据的时间。

二是网络状态不佳时仍可以显示离线数据。

2、本地存储

用chrome浏览器打开一个网页，F12进入开发者模式，点击Application，我们可以看到：

以上的Local Stroage 、 Session Stroage 、 IndexedDB 、Cookies，就是常用的本地存储其中的几种。

3、常用的本地存储

1） cookie

是客户端用来存储数据的一种选项，它既可以在客户端设置也可以在服务器端设置。cookie会跟随任意HTTP请求一起发送。

优点：兼容性好

缺点：一是增加了网络流量，二是数据容量有限，最多只能存储4kb的数据，浏览器之间各有不同，三是不安全。

2）userData

是微软通过一个自定义行为引入的持久化用户数据的概念。用户数据允许每个文档最多128kb的数据，每个域名最多1MB的数据。

缺点：不是web标准的一部分，只有ie支持。

3）web存储机制

web Stroage，包括：Session Stroage和Local Stroage，

前者严格用于一个浏览器会话中存储数据，因为数据在浏览器关闭后会立即删除；后者则用于跨会话的持久化地存储数据。

缺点：ie不支持Session Stroage，低版本的ie（ie6、7）不支持Local Stroage，并且不支持查询语言。

4）IndexedDB

Indexed Database api的简称，是在浏览器保存结构化数据的一种「数据库」。类似SQL数据库的结构化数据存储机制，代替了废弃已久的web SQL Database api。

优点：能够在客户端存储大量的结构化数据，并且使用索引高效检索的api。

缺点：兼容性不好，未得到大部分浏览器的支持。

4、cookie的用途

　　document 对象的cookie 属性

cookie是一小段文本信息，伴随着用户请求在web服务器和浏览器之间传递。它存储于访问者的计算机中，每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。

首先声明，它是「浏览器」提供的一种机制，

它将 document 对象的cookie 属性提供给 javascript，可以使用JavaScript来创建和取回 cookie 的值，因此我们可以通过document.cookie访问它。

cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，也就是说，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

　　cookie的根本用途

cookie 将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它最根本的用途是 Cookie 能够帮助 Web 站点保存有关访问者的信息。

　　列举cookie的几种小用途

1）保存用户登录信息。这应该是最常用的了。当您访问一个需要登录的界面，例如微博、百度及一些论坛，在登录过后一般都会有类似"下次自动登录"的选项，勾选过后下次就不需要重复验证。这种就可以通过cookie保存用户的id。

2）创建购物车。购物网站通常把已选物品保存在cookie中，这样可以实现不同页面之间数据的同步(同一个域名下是可以共享cookie的)，同时在提交订单的时候又会把这些cookie传到后台。

3）跟踪用户行为。例如百度联盟会通过cookie记录用户的偏好信息，然后向用户推荐个性化推广信息，所以浏览其他网页的时候经常会发现旁边的小广告都是自己最近百度搜过的东西。这是可以禁用的，这也是cookie的缺点之一。

　　cookie是怎么起作用的呢？

在上一节中我们知道 cookie 是存在用户硬盘中，用户每次访问站点时，Web应用程序都可以读取 Cookie 包含的信息。当用户再次访问这个站点时，浏览器就会在本地硬盘上查找与该 URL 相关联的 Cookie。如果该 Cookie 存在，浏览器就将它添加到request header的Cookie字段中，与http请求一起发送到该站点。

4、cookie的格式和常见的属性　

字符串规律：（1）每个 cookie 都以名/值对的形式，即 name=value，（2）名称和值都必须是URL编码的，（3）且两对cookie间以 分号和空格 隔开。

红色标注的那行，稍微猜想一下，也可以知道它是与cookie相关的值和属性。name、value 不必多说，自然是 cookie 的名和值。domian 、Path 、 Expires/max-age 、

Size 、Http 、 Secure等军属cookie的属性。

我们先手动添加几个cookie，代码如下：

document.cookie = "test1=myCookie1;"
document.cookie = "test2=myCookie2; domain=.google.com.hk; path=/webhp"
document.cookie = "test3=myCookie3; domain=.google.com.hk; expires=Sat, 04 Nov 2017 16:00:00 GMT; secure"
document.cookie = "test4=myCookie4; domain=.google.com.hk; max-age=10800;"

domain 和 path

这两个选项共同决定了cookie能被哪些页面共享。

标红区域是默认情况，正如例1中未设置domain和path最终显示的情况。

domain 参数是用来控制 cookie对「哪个域」有效，默认为设置 cookie的那个域。这个值可以包含子域，也可以不包含它。如上图的例子，Domain选项中，可以是".google.com.hk"(不包含子域,表示它对google.com.hk的所有子域都有效)，也可以是"www.google.com.hk"(包含子域)。

path用来控制cookie发送的指定域的「路径」，默认为"/"，表示指定域下的所有路径都能访问。它是在域名的基础下，指定可以访问的路径。例如cookie设置为"domain=.google.com.hk; path=/webhp"，那么只有".google.com.hk/webhp"及"/webhp"下的任一子目录如"/webhp/aaa"或"/webhp/bbb"会发送cookie信息，而".google.com.hk"就不会发送，即使它们来自同一个域。

expries/max-age失效时间

expries 和 max-age 是用来决定cookie的生命周期的，也就是cookie何时会被删除。

expries 表示的是失效时间，准确讲是「时刻」，max-age表示的是生效的「时间段」，以「秒」为单位。

若 max-age 为正值，则表示 cookie 会在 max-age 秒后失效。如例四中设置"max-age=10800;"，也就是生效时间是3个小时，那么 cookie 将在三小时后失效。

若 max-age 为负值，则cookie将在浏览器会话结束后失效，即 session，max-age的默认值为-1。若 max-age 为0，则表示删除cookie。

secure

默认情况为空，不指定 secure 选项，即不论是 http 请求还是 https 请求，均会发送cookie。

是 cookie 的安全标志，是cookie中唯一的一个非键值对儿的部分。指定后，cookie只有在使用SSL连接（如HTTPS请求或其他安全协议请求的）时才会发送到服务器。

httponly（即http）

httponly属性是用来限制客户端脚本对cookie的访问。将 cookie 设置成 httponly 可以减轻xss（跨站脚本攻击 Cross Site Scripting）攻击的危害，

防止cookie被窃取，以增强cookie的安全性。（由于cookie中可能存放身份验证信息，放在cookie中容易泄露）

默认情况是不指定 httponly，即可以通过 js 去访问。

5、如何利用以上属性去设置cookie？

　　服务器端设置

服务器通过发送一个名为 Set-Cookie 的HTTP头来创建一个cookie，作为 Response Headers 的一部分。如下图所示，每个Set-Cookie 表示一个 cookie（如果有多个cookie,需写多个Set-Cookie），每个属性也是以名/值对的形式（除了secure），属性间以分号加空格隔开。格式如下：

Set-Cookie: name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]

只有cookie的名字和值是必需的。

　　客户端设置

客户端设置cookie的格式和Set-Cookie头中使用的格式一样。如下：

document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"

若想要添加多个cookie，只能重复执行 document.cookie（如上）。这可能和平时写的 js 不太一样，一般重复赋值是会覆盖的，

但对于cookie，重复执行 document.cookie 并「不覆盖」，而是「添加」（针对「不同名」的）。