cookie和sessionStorage和localStorage的区别

最新推荐文章于 2024-08-19 17:52:44 发布

ALSNEI

最新推荐文章于 2024-08-19 17:52:44 发布

阅读量846

点赞数

分类专栏： web优化 JS 移动端问题面试题文章标签： cookie 浏览器存储数据

本文链接：https://blog.csdn.net/alsnei/article/details/55003046

版权

JS 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

web优化

9 篇文章 0 订阅

订阅专栏

面试题

7 篇文章 0 订阅

订阅专栏

cookie和sessionStorage和localStorage的区别

共同点：都是保存在浏览器端，且同源的。
不同：
2.1. 存储数据的生命周期
cookie: 可设置失效时间，默认是关闭浏览器后失效
localStorage: 手动清除，否则永久保存
sessionStorage：仅在当前网页中存在，直到关闭该网页或者浏览器后失效。
2.2. 存储数据量大小
cookie: 4K左右
localStorage与sessionStorage：5M
2.3. 与服务器之间通信
cookie: 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
localStorage与sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信
2.4. 作用域
cookie数据可以设置domain，path
2.4.1. domain即cookie所在的域，默认为请求的地址，如网址为www.jb51.net/test/test.aspx，那么domain默认为www.jb51.net。而跨域访问，如域A为t1.test.com，域B为t2.test.com，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.test.com；如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为t2.test.com。
2.4.2. path即cookie的路径，asp.net默认为/，就是根目录。在同一个服务器上有目录如下：/test/,/test/cd/,/test/dd/，现设一个cookie1的path为/test/，cookie2的path为/test/cd/，那么test下的所有页面都可以访问到cookie1，而/test/和/test/dd/的子页面不能访问cookie2。这是因为cookie能让其path路径下的页面访问。
浏览器会将domain和path都相同的cookie保存在一个文件里，cookie间用*隔开。

2.5. 事件通知机制
HTML5 Web Storage API(localStorage 和 sessionStorage)内建了一套事件通知机制，它可以将数据更新通知发送给感兴趣的监听者。无论监听窗口本身是否存储过数据，与执行存储操作的窗口同源的每个窗口的window对象上都会触发Web Storage事件。
像下面这样，添加事件监听器即可接收同源窗口的Storage事件：

window.addEventListener(“stotage”,displayStorageEvent,true);

代码中事件类型参数是storage，表明我们感兴趣的是Storage事件，这样一来，只要有同源的Storage事件发生（包括SessionStorage和LocalStorage触发的事件），已注册的所有事件监听器作为事件处理程序就会接收到相应的Storage事件。

 StorageEvent接口
 interface StorageEvent:Event{
        readonly attribute DOMString key;
        readonly attribute any oldValue;
        readonly attribute any newValue;
        readonly attribute DOMString url;
        readonly attribute Storage storageArea;
         }

（1） key属性包含了存储中被更新或删除的键。
（2） oldValue属性包含了更新前键对应的数据，newValue属性包含更新后的数据。如果是新添加的数据，则oldValue属性值为null，如果是被删除的数据，则newValue属性值为null。
（3） url属性指向Storage事件发生的源。
（4） StorageArea属性是一个引用，它指向值发生改变的localStorage或sessionStorage。

应用场景

Cookie
1. 判断用户是否登录—(“记住密码”功能。登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。)

localStorage
1. 购物车信息
2. 用户的积分记录等游戏方面的信息

sessionStorage
1.多表单注册或者验证（类似淘宝注册时，将表单拆分为多个子页面，按步骤引导用户完成注册）

安全性

由于只要打开浏览器的控制台，你就可以随意篡改Cookie、localStorage 和 sessionStorage中的值（即网站存在XSS风险），所以不用他们存储你系统中的敏感数据。

XSS

跨站脚本攻击(Cross Site Scripting)，为不和CSS混淆，故将跨站脚本攻击缩写为XSS。XSS即恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。
然而Xss几乎每个网站都存在，google、baidu、360等都存在，所以也不必太担心。