zoukankan      html  css  js  c++  java
  • 【原】web开发常见的storage、cache

    打开chrome开发者工具application,我们可以清楚的看到storage包含以下内容:

    什么是cookie?

    • cookie一般是由服务器用Set-Cookie 头给客户端一串字符串
    • 客户端每次访问相同域名的网页时,必须带上这段字符串
    • 客户端要在一段时间内保存这个Cookie
    • Cookie 默认在用户关闭页面后就失效,后台代码可以任意设置 Cookie 的过期时间
    • cookie存放于硬盘,通常大小为4KB
    • 前端最好不要读写cookie
    • 用户可以人为修改cookie

    什么是session?

    • 正是因为用户可以修改cookie,所以诞生出session,它是基于cookie的.
    • session是服务器上的一块内存(hash表),保存了所有session
    • session将 SessionID(随机数)通过 Cookie 发给客户端.客户端访问服务器时,服务器读取 SessionID
    • 服务器再通过 SessionID 可以得到对应用户的隐私信息,如 id、email

    什么是localstorage?

    • LocalStorage 跟 HTTP 无关
    • HTTP 不会带上 LocalStorage 的值
    • 只有相同域名的页面才能互相读取 LocalStorage(没有同源那么严格)
    • 每个域名 localStorage 存储量一般为 5M
    • 常用场景:记录有没有提示过用户(没有用的信息,不能记录密码)
    • LocalStorage 永久有效,除非用户清理缓存

    什么是sessionstorage?

    • sessionstorage是会话存储,跟localstorage功能相似,区别在于关闭浏览器窗口随即清除
    • sessionstorage与session无关.

    什么是cache-control?

    • cache-control通常用于优化网页性能,适当使用可减少重复读取相同内容
    • 可以在服务端setHeader设置cache-control
    • 可以设置让该字段存于缓存中,浏览器下次访问时不发起请求,直接从缓存中读取该资源,比如我们的CDN的样式/脚本/图片就经常使用到

    什么是IndexedDB?

    • Indexed DB 的操作是异步的,不会阻塞主线程的执行,可以在 window、web workers、service workers 环境中使用。
    • IndexedDB 是基于文件存储的,API 较为复杂,包含 v1 v2 的差异,建议通过类库来使用,比如:Dexie.js。

    什么是ETag?

    • ETag通常用于优化网页性能,适当使用可减少重复读取相同内容
    • 可通过服务端setHeader设置etag为相应的字段的md5值
    • 浏览器访问时,request.headers会带有if-none-match属性(为上述MD5),若不等于则说明服务器上的
      该资源与本地存储的该资源不相同,需要重新从服务器加载;若相等则说明两者资源相同,则直接从本地
      缓存获取.后端应设置statusCode=304.与cache-control不同的是:etag始终都要发请求和收响应,而
      cache-control不发请求.

    Cookie、localStorage、sessionStorage区别

    • 存储大小:Cookie4K,Storage5M
    • 有效期:Cookie拥有有效期,Storage永久存储
    • Cookie会发送到服务器端,存储在内存中,Storage只能存储在浏览器
    • 路径:Cookie有路径限制,Storage只存储在域名下
    • API:Cookie没有特定的API,Storage有对应的API

    VUEX数据存储在哪里?

    • 存放于内存
    • 存储大小没有限制

    参考文章

    https://segmentfault.com/a/1190000038309852

    https://www.jianshu.com/p/109ffcb0aca5

    https://zhuanlan.zhihu.com/p/373190925

    作者:白树

    出处:http://peunzhang.cnblogs.com/

    您觉得本文不错,可打赏博主,或点击右下角【好文要顶】支持博主。


    很多人在看的文章

    《pageResponse - 让H5适配移动设备全家》

    《移动web资源整理》

    《移动web点5像素的秘密》

    《移动web使用css3实现跑步》

    《移动web页面使用字体的思考》

    《高清显示屏原理及设计方案》

    《css实现两端对齐的3种方法》

    我要赞个
    我要评论
    我要收藏
    返回顶部
    跳到底部
  • 相关阅读:
    Python排列函数:sort、sorted
    Python高阶函数:map、reduece、filter
    Python:容器、迭代对象、迭代器、生成器及yield关键字
    JPA-映射-(@OneToOne)双向一对一
    JPA-映射-(@OneToMany、@ManyToOne)双向一对多
    JPA-映射-(@OneToMany)单向一对多
    JPA-映射-(@ManyToOne)单向多对一
    JPA-EntityManager.merge()
    JPA-API
    leetcode 2.Add Two Numbers
  • 原文地址:https://www.cnblogs.com/PeunZhang/p/15133251.html
Copyright © 2011-2022 走看看