cookie、localStorage、sessionStorage

捌玖ki
328 阅读7分钟

cookie

HTTP Cookie（也叫Web Cookie或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器在发起请求时被携带并发送到服务器上。通常，它用于告知服务器两个请求是否来自同一浏览器。Cookie使基于无状态HTTP协议记录稳定的状态信息

Cookie只是存储在计算机浏览器中的小型文本文件。它们包含以下数据：

  1. 保存数据的Name-value对
  2. 日期到期时间，该cookie失效
  3. 应将其发送到的对应服务的域和路径

作用：

  1. 会话状态管理（如用户状态、购物车、游戏分数或其他需要记录的信息）
  2. 个性化设置（如用户自定义设置、主题等）
  3. 浏览器行为跟踪（如跟踪分析用户行为等）

限制：

  1. 每个cookie的最大为4096字节
  2. 每个域名最多10个cookie（浏览器策略有不同）
  3. cookie是器自己的域名专用（网站无法读取其他域的Cookie，只能是他自己的）
  4. 大小限制适用于整个cookie，而不仅仅是它的值

限制访问Cookie

有两种方法确保Cookie被安全发送，并且不会被意外的参与或脚本访问：Secure和HttpOnly属性。
标记为Secure的Cookie只能通过被HTTS协议加密过的请求发送给服务端，因为可以预防中间人攻击。
但是即使设置了Secure标记，敏感信息也不应该通过Cookie传送，因为Cookie有其固有的不全性。

JS的Document.cookieAPI无法访问带有HttpOnly属性的cookie；此类Cookie仅用于服务器。

Set-Cookie:nickname=ki;Secure; HttpOnly

Cookie的作用域

Domain属性
Domain指定了哪些主机可以接受Cookie，如果不指定，默认origin，不包含子域名，

Path属性
标识指定主机下那些路径可以接受Cookie（该路径必须存在请求URL中）
设置Path=/docs,则下面地址都会匹配

  • /docs
  • /docs/web
  • /docs/web/http

设置sameSite：
允许服务器制定是否/何时通过跨站请求发送cookie。

属性值秒速
Strict浏览器将只在访问相同站点时发送cookie
Lax（默认）和Strict类似，出了当用户导航到cookie的源站点时发送cokkie
None浏览器会在同站请求、跨站请求下继续发送cookie，不区分大小写
Set-Cookie:nickname=ki; SameSite=strict

Cookie prefixs：

__host-
如果cookie名称具有此前缀，则Set-Cookie仅当它也标有Secure属性、从安全源发送、不包括属性Domain且Path属性设置时，他才回从标头中接受/

__Secure-
如果cookie名称具有此前缀，则仅当也用Secure属性标记，是从安全来源发送的，它才在Set-Cookie标头中接受，该前缀限制要弱于__Host-前缀。

js使用Document.cookie

create cookies
设置cookie:
这是一个添加的过程，不会覆盖以前的。

document.cookie = "usename: ki"

设置cookie的过期时间

document.cookie = "userId=ki; expires=Wed, 15 Jan 2022 12:00:00 UTC"

设置一个cookie路径

document.cookie = "userId=ki; expires=Wed, 15 Jan 2022 12:00:00 UTC; path=/user"

设置cookie域

document.cookie = "userId=ki; expires=Wed, 15 Jan 2022 12:00:00 UTC; path=/user;domain=baidu.com"

Read Cookies

const cookies = document.cookie

image.png

update cookies
直接覆盖userId这个键对应的值

document.cookie = "userId=kiki"

delete cookies

document.cookie = "userId="

web Storage API

  • sessionStorage 为每一个给定的源维持一个独立的存储区域，改区域存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）
  • localStorge 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

创建Storgae

localStorage.nickname = 'ki';
localStorage['nickname'] = 'ki';
localStorage.setItem('nickname', 'ki'); // 推荐，使用web storage api

获取

localStorage.getItem('nickname');

更新

// nickname如果已经存在，则会更新，否则是新建
localStorage.setItem('nickname', '捌玖');

清除

localStorage.removeItem('nickname'); // 移除nickname这个storgae

locallStorage.clear(); // 清空当前域的storage

监听storage变化

【我没有测试出来效果，有谁知道怎么触发这个吗】

window.addEventListener('storage', function(e) {
    // e.key 修改的谁
    // e.oldValue 修改前的值
    // e.newValue 修改后的值
    // e.url 那个域名下修改了storgae
    // e.storageArea
})

IndexedDB

它是一种底层的API，用户客户端存储大量结构化数据，包括文件、二进制大型对象。该API使用索引来实现对数据的高性能搜索。

IndexedDB的特点：

  • 存储空间大，存储空间可以达到几百兆甚至更多
  • 支持二进制存储：它不仅可以存储字符串，而且还可以存储二进制数据
  • 有同源限制，每个数据库只能在自身域名下访问，不能夸域名访问
  • 支持事务型：执行的操作会按照事务来分组，在一个事务中，要么所有的操作都成功，要么所有的操作都失败
  • 键值对存储：IndexDB内部采用对象仓库，存放数据。所有类型的数据都可以直接存入，包括js对象。对象仓库中，数据以“键值对”的形式保存，每一个数据记录都有对应的主键，主键时独一无二的，不能有重复，否则会抛出一个错误
  • 数据操作是异步的：使用IndexedDB执行的操作时异步执行的，以免阻塞应用程序

面试题

localStorage存储的键值采用什么字符编码

答案：UTF-16

MDN: localStorage#description

The keys and the values stored with localStorage are always in the UTF-16 string format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.

需要注意的一个点因为UTF-16，每个字符使用两个字节，是有前提条件的，就是码点小雨0xFFFF(655365），大于这个码点的就是四个字节

localStorage大小可存储5M，5M的单位是什么

答案：字符串的长度值，亦或utf-16编码单元

根据utf16编码规则，要么2个字节，要么四个字节，所以不如说是10M的字节数，更为合理

localStorage键占不占存储空间

答案：占空间

键的数量，对读写的影响

答案：键的数量对读取性能有影响的，但是不大。值的大小对性能影响更大，不建议保存大的数据

写一个方法统计localStorage已使用空间

function sizeOfLS() {
    return Object.entries(localStorage).map(v => v.join('')).join('').length;
}

如何给Storage设置过期时间

cookie是可以设置过期时间，localStorage在我们不清除的情况，会一直存在，如何设置他的过期时间呢？

  • 将有效时间和值一起缓存
  • 获取的时候校验时间，如果在有效时间内，返回结果
  • 如果没有在有效时间内，清除当前的缓存，返回null或者undefined

localStorage和sessionStorage的异同

相同：

  • 两者都拥有一个相同的原型对象Storage
  • 两者都有length、key()、getItem()、setItem()、removeItem()、clear()等属性和方法

区别：

  • sessionStorage当前会话级别的（tab），tab关闭后，就会被清除
  • localStorage如果不执行清除，会一直存在

当点击某个链接打开新的Tab页面的同时，sessionStorage 将不会继承到新的页面上，即使新的 Tab 页面是符合同源策略，sessionStorage 是和当前Tab页相关

cookie和session的区别

  • cookie数据存放在客户端，session数据放在服务器
  • cookie本身本不安全，考虑到安全应当使用session
  • session会在一定时间内保存在服务器上，如果访问量比较大，会比较消耗服务器的性能。考虑到减轻服务器性能放main的开销，应当使用cookie
  • 耽搁cookie保存的数据吧能超过4k，很多浏览器都限制一个域名最多保存50个cookie，将登陆等重要信息存放在session中

cookie和Storage的对比

类型生命周期存储容量存储位置
cookie默认保存在内存中，随浏览器关闭失效（若设置了过期时间，在过期时间后失效）4KB客户端
localStorage永久有效，可主动清除4.98M（不同浏览器存在差异）客户端，不与服务端交互。节省网络流量
sessionStorage仅在当前网页会下生效，关闭网页或浏览器后会被清除4.98（部分浏览器没有限制）同上

html5有哪些存储方式

  1. 本地存储Storage - localStorage、sessionStorage
  2. 离线缓存 applicaton cache
  3. indexDB和webSQL

参照文档：

Using the Web Storage API
Using HTTP cookies localStorage灵魂五问。 5M？？ 10M !!!
localStorage、sessionStorage、cookie、session

avatar
文章
阅读
粉丝