客户端存储:localStorage,sessionStorage,cookie之间的异同?

最新推荐文章于 2022-09-19 19:27:09 发布

梦里梦一

最新推荐文章于 2022-09-19 19:27:09 发布

阅读量549

点赞数 2

分类专栏： localStorage cookie 客户端存储前端 js 文章标签： localStorage cookie 客户端存储

本文链接：https://blog.csdn.net/qq_38601916/article/details/81323192

版权

18 篇文章 0 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

前言:localStorage和sessionStorage是h5中新增的API,而cookie是h5之前就有的,cookie技术也叫会话控制技术.在存储数据这个功能,三者没有什么本质性区别,但是localStorage是比cookie更优秀的技术.

三者的区别:

特性	cookie	localStorage	sessionStorage
数据的生命周期	没有设置时间:则关闭浏览器失效设置设置时间:则指定时间后失效	如果没有手动清除,永久保存	关闭设置sessionStorage的标签页便会失效,刷新该页面,不会失效,项目页面在一个新窗口打开或者关闭浏览器重新打开也会消失
作用范围	当前页面指向的文件目录及其子目录,当然设置setcookie函数的参数4,5,可以改变作用范围.同一浏览器的不同页面可以共享cookie,但是cookie无法跨域,这使得我在vue项目没有用它	同一个浏览器的不同页面可以共享信息,不同的浏览器之间数据不能共享	设置sessionStorage的标签页
可存储的数据量	4k左右	20m	5m
数据的存储位置	未设置保存时间:保存在运行内存中设置保存时间:保存在硬盘里	保存在硬盘里	保存在运行内存中
数据的存储形式	纯纯的字符串:即“名称=值;expires=时间”读的时候也是这玩意,比较难用	也是字符串,以键值对的形式存储,常利用JSON对象的方法去进行读写数据时的涉及到的转化	同localStorage
与服务器端通信	每次都会携带在http头中,如果页面中有太多cookie会影响性能	不参合与服务器的通信,减少了网络请求	同localStorage
应用场景	与服务端的session技术配合判断用户是否登录	也可以记录网站用户名,显示搜索历史,h5游戏的游戏缓存,我前两天写的博客内容也被存下来了	未知

都有安全性问题,在控制台的Application处就能访问,修改到三者保存的数据,所以重要数据决不能在这儿保存.

关注