本地存储
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 的区别
-
存取数据的类型不同 cookie 只能存储 ASCII 字符串,session 可以存储任意类型的数据,包括变量 -
存储的地点不同 cookie 存储在客户端,session 存储在服务端 -
安全性 / 隐私策略不同 由于 cookie 存储在客户端,对客户端是可见的,这导致cookie可能被获取、复制以及修改。session 存储在服务端,对客户端是透明的,信息不易泄露出去,比较安全 -
服务器压力不同 由于 cookie 存储在客户端,session 存储在服务端,所以 session 对服务器的压力大,每一个用户都需要创建一个 session,这样就会生成许多 session -
有效期不同 cookie 可以设置长时间保持,比如默认登录功能,session 一般时间比较短,客户端关闭或者 session 超时时都会失效 -
存储大小不同 单个 cookie 保存的数据不能超过 4 k,session 可以存储的数据远远高于 cookie -
跨域支持上的不同 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 过期时间 第三方库
|