浏览器数据存储方式总结---localStorage、sessionStorage、cookie

1、cookie

1.1、cookie的作用

说到cookie,其实cookie有两个主要功能

  • 用于解决http无状态的缺点,在客户端存储会话信息,记录用户的状态
  • 也就是我们现在也经常使用cookie在客户端存储一些数据
1.2、cookie的构成
document.cookie="key=value"

key和value是包含在一个字符串中

一般来说,cookie是由浏览器保存的以下几块信息构成的

  • name 这个name为自己取的cookie名称,同名的值会覆盖
  • domain 可以访问此 cookie 的域名
  • path ,可以访问此 cookie 的页面路径
  • Expires/Max-Age 设置失效时间,分别是到期时间(Expires) / 持续时间 (单位是秒)(Max-Age)
  • http-only 是否只作为http时使用,如果为true,那么客户端能够在http请求和响应中进行传输,但时客户端浏览器不能使用js去读取或修改
  • Size, 此 cookie 大小。
  • secure 字段,设置是否只能通过 https 来传递此条 cookie
1.3、如何使用cookie存储数据

一般来说,有两种方式可以生成cookie

  • 一种是服务器发送http响应时指定Set-Cookie进行指定,
  • 另一种我们可以使用js生成cookie

由于cookie需要通过URL编码,因此在写入cookie时和读取cookie时我们都需要进行编码和解码操作,可以采用js-cookie插件来读取/设置cookie

1.4、cookie的缺点

(1)cookie的存储大小有限制,对于每个域,一般只能设置20个cookie,每个cookie大小不能超过4KB
(2)浏览器会主动存储后台接口返回的 set-cookie 头信息,在浏览器本地设置cookie值
(3)通过 Expires(到期时间) / Max-Age(持续时间 ----单位是秒)、设置时效性,如果不设置,关闭清空cookie,
(4)可以设置 http-only 属性为 true ,禁止客户端代码(js)修改该值

1.5、cookie常用方法

原生js操作cookie的方法

//设置cookie
document.cookie = `${key}=${value};`

//获取cookie,
// 返回值是当前域名下的所有cookie,并按照某种格式组织的字符串 :key=value;key1=value1;......keyn=valuen
let allCookies = document.cookie;     //再以 “; ”来切割

封装后的cookie操作方法

//设置cookie
function setCookie(name,value,options={}){
    let cookieData = `${name}=${value};`;
    for(let key in options){
        let str = `${key}=${options[key]};`;
        cookieData += str;
    }
    document.cookie = cookieData;
}

//获取cookie
function getCookie(name){
    let arr = document.cookie.split("; ");
    for(let i=0;i<arr.length;i++){
        let items = arr[i].split("=");
        if(items[0]==name){
            return items[1];
        }
    }
    return "";
}
1.6、cookie总结
  • cookie 在过期时间之前一直有效,即使窗口或浏览器关闭
  • 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中,发送给服务器端
  • 浏览器会主动存储接收到的 set-cookie 头信息的值
  • 可以设置 http-only 属性为 true 禁止客户端代码(js)修改该值
  • 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
  • 同域下个数有限制,最好不要超过50个(不同浏览器有所不同)
  • 单个cookie内容大小有限制,最好不要超过4000字节(不同浏览器有所不同)
1.7、cookie 的常用场景:
  • 保存用户登录状态。例如将用户 id 存储于一个 cookie 内,这样当用户下次访问该页面时就不需要重新登录了
  • 跟踪用户行为。通过cookie记住用户操作行为,当下次再打开该页面时,自动默认该行为。比如说:不同用户所在地区的天气情况只要设置一次,下次打开就是之前设置的地方的天气。或者说网站的换肤功能等。
1.8、cookie 有哪些编码方式?

参考回答: encodeURI()

2、本地缓存Storage----- sessionStorage、localStorage

2.1、使用方法
  • 设置

    setItem(key, value) 添加或更新(如果数据项中已存在该key)数据项中指定key的value

  • 获取

    getItem(key)获取数据项中指定key对应的value

  • 移出指定数据

    removeItem(key) 删除数据项中指定key的value

  • 清空所有数据

    clear() 清空所有数据项

2.2、不同点
localStorage
  • 窗口或浏览器关闭也一直保存,始终有效,因此用作持久数据
  • 在所有同源窗口 (ip+port相同)都是共享的
  • 支持 storage 事件
sessionStorage
  • 仅在当前浏览器窗口关闭前有效
  • 页面私有,只在当前窗口拥有,即使地址相同,再打开一个新窗口,也没有
  • 不支持 storage 事件
cookie
  • 只在设置的 cookie 过期时间之前一直有效,即使窗口或浏览器关闭
2.3、共同点
localStorage和sessionStorage和cookie共同点
  • 同域(同源策略)限制:同源策略:请求与响应的 协议、域名、端口都相同 则时同源,否则为 跨源/跨域
  • 存储的内容都会转为字符串格式
  • 都有存储大小限制
localStorage和sessionStorage共同点
  • API相同
  • 存储大小限制一样基本类似
  • 无个数限制
lcookie
  • 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中,发送给服务器端
  • 浏览器会主动存储接收到的 set-cookie 头信息的值
  • 可以设置 http-only 属性为 true 来禁止客户端代码(js)修改该值
  • 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
  • 同域下个数有限制,最好不要超过50个(不同浏览器有所不同)
  • 单个cookie内容大小有限制,最好不要超过4000字节(不同浏览器有所不同)
2.4、同一浏览器的同源但不同标签页间,可以共享 localStorage,但是无法共享sessionStorage的详细说明

localStorage不同窗口共享
即A窗口新增/修改localStorage的值,那么B窗口也会新增/修改相应的值,两个窗口的localStorage数据是同步的。

sessionStorage不同窗口之间无法共享

  • 1、刷新页面sessionStorage不会清除
  • 2、打开多个相同的URL的Tab窗口,会创建各自的sessionStorage。
  • 3、关闭对应tab窗口,会清除对应的sessionStorage。
  • 4、在当前窗口打开一个新的同源窗口时,会复制当前窗口的session数据到新的窗口。
    但是如果你不从当前窗口处打开,而是直接打开一个新的同源窗口,那么浏览器并不会复制之前同源窗口的session数据到新的窗口,而是会创建一个新的sessionStorage

    <----注意!!!!!!!!!!!

3、cookie、localStorage、sessionStorage之间的区别

  • 1、请求时是否会自动携带
    cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
  • 2、存储大小限制不同
    cookie数据不能超过4k,很多浏览器都限制一个站点最多保存 20 个 。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大
  • 3、数据有效期不同
  1. sessionStorage:仅在当前浏览器窗口关闭前有效,即当前窗口关闭后数据就会被清空;
  2. localStorage:始终有效窗口或浏览器关闭也一直存在,没有有效期,除非删除,否则一直存在
  3. cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
  • 4、作用域不同
  1. sessionStorage 限制在单个标签页中
  2. localStorage 在所有同源窗口中都是共享的
  3. cookie 在所有同源窗口中都是共享的
  • 5、是否支持 storage 事件-----监听变化
    localStorage支持storage事件
    sessionStorage、cookie不支持;

  • 6、Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。

  • 7、存放位置
    cookie 数据存放在客户的浏览器上,session 数据放在服务器上。

cookie 不是很安全,别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗 考虑到安全应当使用 session。

session 会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用 COOKIE。

4、IndexedDB

4.1、为什么会有IndexedDB

现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 存储上限在 5MB 左右,而且不提供搜索功能,不能建立自定义的索引,所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景

4.2、什么是IndexedDB

通俗地说,IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作,IndexedDB 允许储存大量数据,提供查找接口,还能建立索引,这些都是 LocalStorage 所不具备的,就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库.

4.3、IndexDB的优点
  • a、键值对储存
  • b、异步: IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的,异步设计是为了防止大量数据的读写,拖慢网页的表现
  • c、支持事务: IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况
  • d、同源限制:IndexedDB 受到同源限制,每一个数据库对应创建它的域名,网页只能访问自身域名下的数据库,而不能访问跨域的数据库
  • e、储存空间大: IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限
  • f、支持二进制储存:IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)
4.4、IndexDB的缺点
  • a、不支持DO操作;
  • b、不能跨域

IndexDB参考链接:https://blog.csdn.net/qq_39958056/article/details/125524904

参考链接:https://zhuanlan.zhihu.com/p/159268611

  • 1
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值