了解cookie和storage的区别及优缺点

Posted 2023-04-09

参考技术A sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。

区别：

1.cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

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

据，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

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

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

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

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

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

3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

function setCookie(cname, cvalue, exdays)

    var d = new Date();

    d.setTime(d.getTime() + (exdays*24*60*60*1000));

    var expires = "expires="+ d.toUTCString()

    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";



*path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

localStorage.setItem("name", "hsy")

sessionStorage.setItem("name", "hsy");

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

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

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

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

cookie和session,cookie和web storage

一、cookie和session

cookie和session的共同之处在于：cookie和session都是用来跟踪浏览器用户身份的会话方式。

session指的是访问者从到达某个特定页面到离开为止的那段时间。

cookie和session的区别：

1.cookie数据保存在客户端，session数据保存在服务器

2.cookie不是很安全，别人可以分析存放在本地的cookie进行cookie欺骗，考虑到安全应该使用session

二、cookie和web storage

1.web storage是h5中的本地存储方式，包括两种：sessionstorage和localstorage。

sessionstorage是用于本地存储一个会话中的是乬，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是一种会话级别的存储不是持久化的本地存储

localstorage用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期。

2.cookie是指某些网站为了识别用户身份，进行session跟踪存在用户本地终端上的数据，即浏览器缓存。

cookie和web storage的区别在于后者是为了克服前者的一些弊端设计的。

3.cookie和web storage区别

3.1.cookie的长度和大小受限,每个cookie长度不能超过4KB，否则会被截掉。webstorage的容量大，每个域Chrome，Firefox和Opera是5M，IE是10M。

3.2.每次请求一个新的页面cookie都会被发送过去，每次请求不会携带webstorage的内容

3.3.cookie需要指定作用域，不可以跨域调用。web storage可以将数据存放在localstorage中，需要使用的时候抽取几条放在自己的域下面来解决跨域问题。

3.4.cookie的作用是与服务器进行交互，作为http规范的一部分存在，web storage只是作为本地存储而存在

3.5.cookie需要前端开发自己封装setcookie，getcookie，而webstorage拥有setItem,getItem,removeItem,clearItem等方法

4.总结

总的来说，web storage有它的好处，但是并不能完全取代cookie,只是说解决了以前有一些场景下不必要使用cookie而不得不用的麻烦