cookie,sessionStorage,localStorage整理（个人笔记）

猫羊

已于 2022-10-22 11:59:44 修改

阅读量183

点赞数

文章标签：前端

于 2022-05-19 20:46:25 首次发布

本文链接：https://blog.csdn.net/qq_53555672/article/details/124871253

版权

参考：【前端工程师面试宝典】学习说明_互联网校招面试真题面经汇总_牛客网 (nowcoder.com)

(29条消息) 浏览器缓存：memory cache、disk cache、强缓存协商缓存等概念_Lvan的前端生活的博客-CSDN博客_浏览器memory

cookie,sessionStorage,localStorage的区别:

三者操作：

sessionStorage

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

localStorage

localStorage.setItem('myCat', 'Tom');
localStorage.getItem('myCat');
localStorage.removeItem('myCat');
localStorage.clear();

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}//写操作
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}//读操作封装
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

1.保存在客户端，通过客户端进行存储，保持同源的。

区别：
1.（1）cookie的数据始终在同源的http请求中携带，在服务器和浏览器中传递。（cookie数据有路径的概念）

扩展：cookie的路径通过url访问服务器时路径的匹配然后发送对应存储的cookie量

如果我们设置path，如果当前访问的路径包含了cookie的路径（当前访问路径在cookie路径基础上要比cookie的范围小）cookie就会加载到request对象之中。（进行cookie报文的回返）

（2）后两者是存储在本地，供用户使用的内存空间。

2.存储限制的大小不同

(1)cookie按上面的解析来看，应该是要求小体积，高信息量的数据列，大小一般不能超过4k。

（2）另外两者可以协同开发者调用和实现一些存储操作，自然占用的内存较大，一般可以达到5M或更大。（如果不够可不可以专门搭建一个健值表，模拟这种数据存储形式，异步获取实现相同效果）

3.存储的有效期不同：

（1）session的有效期，因为它存留的是两个窗口程序，端到端之间的回话信息，所以在浏览器关闭之前都是有效的，子窗口脚本session继承父窗口的session。

（2）localStorage始终有效的数据存储，可做一些长效处理-值得注意的是可以通过postmessge通信往其他域上存取进行local存储内存的扩展。（IndexDB实现脱敏数据存储）

（3）cookie利用浏览器提供的api封装实现，需要设置过期时间，不受窗口影响。

4.作用域不同：

（1）session不在不同的浏览器窗口中共享（隔离域）

（2）同源窗口（客户端下）都可以相互调用，都是共享的，可以用来实现一些分页面下的信息沟通读取。继承session（以及cookie的短暂标识）

5.webStorage支持事件通知机制，可以监听数据信息进行推送（js脚本数据检测）

以上是简单的一些三个介绍－－接下来是一些面试题帮助解析（答案+自己思维）：

1.localstorage是持续的，那怎么写一个会过期的localstorage呢？
（1）方案一：惰性删除：直接再次封装local的api，在存储的过程中，同步存入过期和当前时间，待下次读取调用时候才进行判断是否过期（如此叫做惰性删除），但是没有被调用的将会持续存在。

（2）方案二：定时删除：每隔一段时间执行一次删除操作，通过给window全局对象设置定时器执行实现，但是这样也需要用户保持js有运行环境。

2.localStorage能实现跨域么？
localStorage本身需要同源的读取
（1）解决localStorage的跨域问题：

*window.postMessage()* 方法可以安全地实现跨源通信。

otherWindow.postMessage(message, targetOrigin, [transfer]);

其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。
message
将要发送到其他 window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。[1]
targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件

<iframeHTML 内联框架元素 (<iframe) 表示嵌套的browsing context。它能够将另一个 HTML 页面嵌入到当前页面中。

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录 (session history)和DOM 树。包含嵌入内容的浏览上下文称为父级浏览上下文。顶级浏览上下文（没有父级）通常是由 Window 对象表示的浏览器窗口。

3.memory cache开启（可以设置no-store）

浏览器缓存：

Service Worker
Memory Cache
Disk Cache
Push Cache

在这里插入图片描述

network选项中的观察（可以看到很多数据来自于disk cache）

（1）memory cache分析

在内存中的缓存，页面Tab关闭后，内存缓存会被释放。

（2）disk cache

存储在硬盘中的缓存，缓存再硬盘中，容量大，触发是通过浏览器的请求头进行获取

对于存储的选择（对于大文件来说，大概率是不存储在内存中的，反之优先，当前系统内存使用率高的话，文件优先存储进硬盘）

（3）service worker独立运行线程

缓存过程：

根据是否需要向服务器重新发起HTTP请求将缓存过程分为两个部分，分别是强缓存和协商缓存。

强缓存（Expires 和 Cache-Control报文头实现）

1、Expires
缓存过期时间，用来指定资源到期的时间，是服务器端的具体的时间点。

2、Cache-Control
比如：Cache-Control:max-age=300 时，则代表在这个请求正确返回的5分钟内再次加载资源，就会命中强缓存。

强缓存会导致页面加载不一致的一些失误

协商缓存

协商缓存可以通过设置两种 HTTP Header 实现：Last-Modified 和 ETag

Last-Modified和If-Modified-Since
Last-Modified 指的是这个资源在服务器上的最后修改时间

浏览器下一次请求这个资源，浏览器检测到有 Last-Modified这个header，于是添加If-Modified-Since这个header，值就是Last-Modified中的值；服务器再次收到这个资源请求，会根据 If-Modified-Since 中的值与服务器中这个资源的最后修改时间对比，如果没有变化，返回304和空的响应体，直接从缓存读取，如果If-Modified-Since的时间小于服务器中这个资源的最后修改时间，说明文件有更新，于是返回新的资源文件和200

4.localstorage的限制
（1）不同浏览器之中的大小不统一，IE8以上才有local属性
（2）localstorage的健对值一般存储为string类型
（3）隐私模式的开启可以屏蔽local的访问（实现*封装全局读取？）
（4）爬虫不能抓取localStorage

注：*为验证性推断和未解决的猜想

一些常见问题

token能放在cookie中么？

token 是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，token 便应运而生。
「简单 token 的组成」:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串）
cookie本身也在路径携带中发送

猫羊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cookie,sessionStorage,localStorage整理（个人笔记）

参考：【前端工程师面试宝典】学习说明_互联网校招面试真题面经汇总_牛客网 (nowcoder.com)(29条消息) 浏览器缓存：memory cache、disk cache、强缓存协商缓存等概念_Lvan的前端生活的博客-CSDN博客_浏览器memorycookie,sessionStorage,localStorage的区别:三者操作：sessionStorage// 保存数据到 sessionStoragesessionStorage.setItem('key', 'value');
复制链接

扫一扫