js本地存储

本地存储

js 本地存储主要有以下几种方式

• cookie
• session
• localStorage
• sessionStorage
• indexedDB(待补充)

cookie

cookie,小型文本文件,指某些网站为了辨别用户信息而存储在用户浏览器(即客户端)上的数据。是为了解决 http 无状态导致的问题(问题:多次请求无法区分是否是来自同一用户)。
它存储的文本数据一般不超过 4kb,由一个名称 name、一个值 value 和其它几个可选属性,如:有效期、安全性、使用范围。
由于需要区分用户,所以在每次请求中都会携带这个 cookie,其保存的信息容易被窃取,所以安全性比较低。改进方法就是使用 https 对其加密。
cookie 是有过期时间的,HTTP1.0 使用的是 Expires,HTTP1.1 使用的是 Cache-Control(优先级高于前者)。
Expires 设置的过期时间是一个绝对时间,而 Cache-Control 使用 Max-Age 设置的时间是一个相对时间,相对于现在。
cookie 可以跨域吗?
cookie的"同源策略":仅仅关注 域名,也就是说 cookie 支持跨域访问,只需要设置 domain 属性为 一个域名,
比如设置为".xxx.com",那么以 ".xxx.com"为后缀的一切域名都能够访问该 cookie。

session

http 请求如何携带 session id? session 存储了哪些内容?
session 代表着服务端和客户端一次会话的过程,session 存储量用户的信息以及配置信息。当用户在用一个网站上不同的页面进行跳转的时候,存储在 session 里面的数据不会丢失,而是一直保存在此次会话中。当客户端关闭会话(关闭浏览器)或者 session 超时失效的时候会话结束。
session 它是存储在服务端中的数据。当客户端向服务端发起一次请求,服务端首先会检查此次请求里面是否有一个唯一表示 session id,如果有则说明此前已经给当前用户创建过 session,服务端就通过这个 session id 把这个 session 拿出来使用(如果找不到会新建)。如果没有,那么服务端则会为此用户创建一个 session,并且生成一个唯一标识 session id,并在此次服务端响应过程中返回给客户端保存
保存这个 session id 的形式可以采用 cookie 的方式
cookie 与 session 的区别

  1. 存取数据的类型不同
    cookie 只能存储 ASCII 字符串,session 可以存储任意类型的数据,包括变量

  2. 存储的地点不同
    cookie 存储在客户端,session 存储在服务端

  3. 安全性 / 隐私策略不同
    由于 cookie 存储在客户端,对客户端是可见的,这导致cookie可能被获取、复制以及修改。session 存储在服务端,对客户端是透明的,信息不易泄露出去,比较安全

  4. 服务器压力不同
    由于 cookie 存储在客户端,session 存储在服务端,所以 session 对服务器的压力大,每一个用户都需要创建一个 session,这样就会生成许多 session

  5. 有效期不同
    cookie 可以设置长时间保持,比如默认登录功能,session 一般时间比较短,客户端关闭或者 session 超时时都会失效

  6. 存储大小不同
    单个 cookie 保存的数据不能超过 4 k,session 可以存储的数据远远高于 cookie

  7. 跨域支持上的不同
    cookie的"同源策略":仅仅关注 域名,也就是说 cookie 支持跨域访问,只需要设置 domain 属性为 一个域名,
    比如设置为".xxx.com",那么以 ".xxx.com"为后缀的一切域名都能够访问该 cookie。
    session 不支持跨域

localStorage / sessionStorage

这两个无法设置过期时间,只能存储字符串类型的数据
localStorage
• 生命周期:永久的将数据存储在本地浏览器中,除非手动删除,否则数据永不过期。
• 共享:存储的信息在同一域中是共享的。
• 数据大小:一般能存储的数据大小为 5M。
• 跨域:否,手同源策略的影响
• 数据类型:字符串类型的数据,如果不是字符串需要先转成字符串,通常使用 JSON来处理
sessionStorage
与 localStorage 比较,唯一不同的就是 生命周期,sessionStorage 关闭页面数据就会被删除了。
应用场景
• 标记用户与跟踪用户的行为的情况,推荐使用 cookie
• 适合长期存储在本地的数据,推荐使用 localStorage
• 敏感账号一次行登录,推荐使用 sessionStorage
• 存储大量数据的情况、在线文档保存编辑历史的情况,推荐使用 indexedDB

webStorage如何设置有效期

我想到的就是当我们第一次存储数据的时候保存当前的一个时间戳,记为 first,当我们后续在进入网站的时候拿到当前时间戳,记为 next ,如果 next - first 小于我们设置的有效期,则说明没有过期,如果大于或等于则表明已经过期,这时候手动删除这些存储在 webStorage 的数据
其他方法:

自定义办法设置 localStorage 过期时间
第三方库

你可能感兴趣的:(前端,http,本地存储)