共同点:用于数据的存储。

区别:

1、是否需要添加到http请求头?

HTTP Cookie(cookie):在客户端存储会话信息,要求服务器对任意HTTP请求发送set-cookie HTTP头作为响应的一部分,包含会话信息。例如set-cookie: name=value。然后浏览器会存储这样的会话信息,并在这之后,通过为每个请求添加cookie HTTP头将信息发送回服务器。如cookie:name=value。

Web Storage:无须将数据发回服务器,仅在本地保存。

2.存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数

据,sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。如果在发送请求时需要携带大量的报文,建议使用storage更好一点

3.数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

4.作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。

5.路径:Cookie有路径的限制(比如cookie可以写在某个域名下面或者某个路径下面,我们只让/AAA.com生效,而/bbb.com则就会看不到),Storage只存储的域名下(比如你写在www.baidu.com下面,在这个域名下,不管是什么路径都有这个Storage)

与Cookie相比,Web Storage存在不少的优势,概括为以下几点:

1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie(<=4kb)要大很多。

2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送到服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。

3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。您可以告诉浏览器 cookie 属于什么路径。默认情况下,cookie 属于当前页。

localStorage.setItem("name", "张三"),sessionStorage.setItem("age", 18);可进行(key,value)的赋值操作

cookie的缺点主要集中于安全性和隐私保护

1.cookie可能被禁用。当用户非常注重隐私保护的时候,他会禁用cookie缓存

2.cookie可能会被删除,每个cookie都是硬盘上的一个文件,因此很容易被用户删除

3.cookie安全性不够高,cookie都是以纯文本形式记录在文件中,如果要保存用户名密码等信息的时候,最好事先经过加密处理

在此,为什么封装Storage?

  • Storage本身有API,但是只是简单的key/value形式
  • Storage只能存储字符串,需要人工转为json对象
  • Storage只能一次性清空,不能单个清空(api下)

下面还是看代码吧

/**
* Storage封装
*/
const STORAGE_KEY = 'mall'; //设置一个独一无二的key
export default{
// 存储值
setItem(key,value,module_name){
if (module_name){
let val = this.getItem(module_name);
val[key] = value;
this.setItem(module_name, val);
}else{
let val = this.getStorage();
val[key] = value;
window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
}
},
// 获取某一个模块下面的属性user下面的userName
getItem(key,module_name){
if (module_name){
let val = this.getItem(module_name);
if(val) return val[key];
}
return this.getStorage()[key];
},
getStorage(){
return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
},
clear(key, module_name){
let val = this.getStorage();
if (module_name){
if (!val[module_name])return;
delete val[module_name][key];
}else{
delete val[key];
}
window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
}
}

总结:如果有哪里写错了,欢迎各位大佬评论区留言指正

参考资料:http://javascript.ruanyifeng.com/bom/webstorage.html

     https://www.jianshu.com/p/c352d4af4ed3

了解cookie和storage的区别及优缺点的更多相关文章

  1. Cookie和Session的区别、优缺点

    1.cookie数据存放在客户的浏览器上,session数据放在服务器上. 2.cookie不是很安全,别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session 3 ...

  2. 用户认证:基于jwt和session的区别和优缺点

    背景知识: Authentication和Authorization的区别: Authentication:用户认证,指的是验证用户的身份,例如你希望以小A的身份登录,那么应用程序需要通过用户名和密码 ...

  3. Token ,Cookie和Session的区别

    在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解. Cookie cookie 是一个非常具体的东西,指的就是浏 ...

  4. 浅谈cookie 和session 的区别

    具体来说 cookie 是保存在“客户端”的,而session是保存在“服务端”的 cookie 是通过扩展http协议实现的 cookie 主要包括 :名字,值,过期时间,路径和域: 如果cooki ...

  5. Token 、Cookie和Session的区别

    本文转至http://blog.csdn.net/tobetheender/article/details/52485948 https://blog.csdn.net/axin66ok/articl ...

  6. Cookie和Session的区别

    前言 HTTP是一种无状态的协议,为了分辨链接是谁发起的,就需要我们自己去解决这个问题.不然有些情况下即使是同一个网站我们每打开一个页面也都要登录一下.而Session和Cookie就是为解决这个问题 ...

  7. cookie 和session 的区别详解

    这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...

  8. Cookie和Session的区别详解

    本文引用自:http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一 ...

  9. cookie 和session 的区别

    假如我填好了淘宝的用户名密码,点击登录,浏览器客户端像服务器端发送请求,这时服务器端看这个用户是第一次登陆,session会让客户端这个浏览器生成个cookie,并给cookie一个session i ...

随机推荐

  1. Docker单机网络下

    前言 Docker系列文章: 此篇是Docker系列的第七篇,大家一定要按照我做的Demo都手敲一遍,印象会更加深刻的,加油! 为什么要学习Docker Docker基本概念 Docker镜像基本原理 ...

  2. Sentinel流控与熔断

    参考: https://thinkwon.blog.csdn.net/article/details/103770879 项目结构 com.guo     ├── guo-sentinel       ...

  3. Linux 命令行通配符及转义符的实现

    我们想对一类文件批量操作,例如批量查看硬盘文件属性,那么正常命令会是: [root@linuxprobe ~]# ls /dev/sda [root@linuxprobe ~]# ls /dev/sd ...

  4. interpration

    On interpreting the effects of repetition interpreting 释意1. If you interpret something in a particul ...

  5. vue3 script setup 定稿

    vue script setup 已经官宣定稿.本文主要翻译了来自 0040-script-setup 的内容. 摘要 在单文件组件(SFC)中引入一个新的 <script> 类型 set ...

  6. java基础---常用类

    一.字符串类String String:字符串,使用一对""引起来表示,字符串常量池在方法区中 public final class String implements java. ...

  7. JUnit5依赖注入与测试接口

    依赖注入 以前的JUnit的类构造方法和测试方法都是不能有参数的,JUnit Jupiter有一个颠覆性的改进,就是允许它们有入参,这样就能做依赖注入了. 如果你对pytest的fixture有了解的 ...

  8. python3.6 找不到Tkinter

    PYTHON3.6安装时提示是否安装(TK) 引入模块import tkinter(都小写)

  9. Docker单机网络实战

    前言 Docker系列文章: 此篇是Docker系列的第八篇,大家一定要按照我做的Demo都手敲一遍,印象会更加深刻的,加油! 为什么要学习Docker Docker基本概念 Docker镜像基本原理 ...

  10. [刘阳Java]_EasyUI环境搭建_第2讲

    在EasyUI的第1讲中我们介绍了学习EasyUI能够做什么,这次我们得快速搭建一个EasyUI环境,来测试一下它的运行效果 1.jQuery EasyUI环境搭建 <script type=& ...