js —— cookie & storage

今天药忘吃喽~ 2024-04-19 13:06 43阅读 0赞

> 参考文章：  
> https://www.cnblogs.com/bellow/p/4962374.html

##### 一、 cookie #####

> 1.  一个 `cookie`可存储的数据大小大概在4kb
> 2.  每次请求都会携带在HTTP请求头中。

###### 1. 介绍： ######

> cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给`JavaScript`。以由`JavaScript`对其进行控制，而并不是`JavaScript`本身的性质。`cookie`是存于用户硬盘的一个文件，这个文件通常对应于一个域名（硬盘中有许多`cookie`文件），当浏览器再次访问这个域名时，便可使用该域名对应的cookie文件。因此，cookie可跨越一个域名下的多个网页，但不能跨越多个域名使用（可通过设置主域名来访问不同主机名对应的网页）

###### 2. 优点： ######

① `cookie`机制将信息存储于用户硬盘，因此可以作为全局变量。  
② **保存用户登录状态**。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，  
③ **跟踪用户行为**。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。利用`cookie`系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。（后台完成）  
④ **定制页面**。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。  
⑤ **使用cookie记录购物车浏览记录**。

###### 3. 缺点 ######

① **cookie可能被禁用**。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；  
② **cookie是与浏览器相关的**。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；  
③ **cookie可能被删除**。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；  
④ **cookie安全性不够高**。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

###### 4. `cookie`的相关操作 ######

###### ① 设置cookie：`document.cookie="..;..;"`(每个cookie都是一个名/值对) ######

> 注意：  
> ① 在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此 种方案还可以避免中文乱码的出现。eg: `document.cookie="str="+escape("I love ajax");` 相当于`document.cookie="str=I%20love%20ajax";`  
> ② 当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

###### ② 设置`cookie`的终止日期`document.cookie = "id=12;expires='日期' "` ######

> 注意：  
> ① 在日期处只能填写`Tue Oct 01 2019 12:00:00 GMT+0800`类似的格式,不能将日期转换成具体年月日…  
> ② 若想要删除某一个`cookie`，可重新设置其终止日期

###### ③ 设置`cookie`的path ######

> ① 默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。  
> ② 若想要cookie在整个网站下可用（可理解成在一个工程下），可以设置：`path:/`, `/`代表根目录下！  
> ③ `cookie`的`path`只能具体到某一个文件夹，不能具体到某一个网页。  
> ④ `cookie`的`path`在设置后便不能再修改  
> ⑤ 假设现在在`test`文件夹下的一个页面添加了一个`cookie`，且将其`path`设置为`/test1`，此时打开页面，`path`值自动变为`/test`

###### ④ 设置`cookie`的`domain` ######

**若想要`cookie`在同一个域下的不同主机都可使用(必须只能为同一个域下的！！！)，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：`document.cookie="name=value;domain=.google.com"`**

> 注意：`domain`只能在初始时设置，设置后不能修改

###### ⑤ 获取`cookie`：`document.cookie` ######

> 只能获取到全部的`cookie`，不能只获取一个。若要找到想要的`cookie`，必须自己判断

###### 二、 storage：`localStorage` & `sessionStorage` ######

> 1.  一个`localStorage` / `sessionStorage`可存储的数据大小大概在5M
> 2.  仅在客户端即浏览器中保存，不参与和服务器的通信。

###### 区别：`localStorage`是本地缓存，缓存到硬盘，关闭浏览器缓存不会消失。`sessionStorage`：浏览器端缓存。关闭浏览器时缓存会消失 ######

###### 1. `localStorage` ######

###### ①添加缓存： `localStorage.setItem(key,value)` ######

> 添加缓存，`key`是唯一的，当缓存中已有key时，再次写该语句，只会将key对应的value值修改，而不会创建一个新的键值对

###### ②根据key得到对应缓存值： `localStorage.getItem(key)` ######

> 由于缓存中`key`是唯一的，故可通过`key`来获取到该`key`对应的`value`

###### ③ 获取缓存中键值对的个数：`localStorage.length;` ######

###### ④ 通过索引获取对应的键值对中的key：`localStorage.key(index)` ######

> 返回index对应的键值对中的key

###### ⑤清除所有缓存： `localStorage.clear()` ######

###### ⑥ 清除key对应的缓存键值对：`localStorage.removeItem(key)` ######

###### 2. `sessionStorage` ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>sessionStorage.setItem(key,value)</code></td> 
   <td>key唯一</td> 
  </tr> 
  <tr> 
   <td><code>sessionStorage.getItem(key)</code></td> 
   <td>返回key对应的value</td> 
  </tr> 
  <tr> 
   <td><code>sessionStorage.length</code></td> 
   <td>缓存中的键值对个数</td> 
  </tr> 
  <tr> 
   <td><code>sessionStorage.key(index)</code></td> 
   <td>返回index对应的key</td> 
  </tr> 
  <tr> 
   <td><code>sessionStorage.clear()</code></td> 
   <td>清除所有缓存</td> 
  </tr> 
  <tr> 
   <td><code>sessionStorage.removeItem(key)</code></td> 
   <td>清除key对应的键值对</td> 
  </tr> 
 </tbody> 
</table>