cookie、localStorage、sessionStorage的区别
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
共同点:sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
区别:
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递,localStorage和sessionStorage仅保存在客户端,不与服务器进行交互通信。
- cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。localStorage 和sessionStorage,但比cookie大得多,可以达到5M或更大。
- localStorage支持事件通知机制,可以将数据更新的通知发送给监听者。 api 接口使用更方便。而cookie的原生接口不友好,需要程序员自己封装
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
- 应用场景:localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。sessionStorage:敏感账号一次性登录;
localStorage提供了几个方法:
1.存储:localStorage.setItem(key,value)如果key存在时,更新value
2.获取 localStorage.getItem(key)如果key不存在返回null
3.删除 localStorage.removeItem(key)一旦删除,key对应的数据将会全部删除
4.全部清除 localStorage.clear() 使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据。
cookie、localStorage、sessionStorage的区别的更多相关文章
- Cookie localStorage sessionStorage
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(tab标签页)有 ...
- 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?
本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...
- cookie, localStorage, sessionStorage区别
cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...
- 本地存储cookie,localStorage,sessionStorage
常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...
- 封装cookie localStorage sessionStorage
var cookie = function(name, value, options) { if (typeof value !== 'undefined') { options = options ...
- [JavaScript] Cookie,localStorage,sessionStorage概述
Cookie Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息.Cookie 的作用就是存储 web 页面 ...
- H5新特性 本地存储---cookie localStorage sessionStorage
本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...
- 简述cookie ,localStrage,sessionStorage的区别?
1.cookie: 是一个回话跟踪技术,信息存储在用户硬盘,可以做全局变量. 什么是会话:用户进入网站,开始浏览到结束的这样的一个过程,称为一次会话. 会话跟踪技术:浏览器和服务器之间进行多次请求数据 ...
- cookie和localstorage sessionStorage的概念、区别、使用场景
本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...
- 客户端 localStorage, sessionStorage, cookie 的区别
SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...
随机推荐
- [ 9.28 ]CF每日一题系列—— 940A规律构造
Description: 输入a,b,x,给你a个0,b个1,你要给出一个组合,让这个组合里存在x位,使得这x为和其x+1位不相等 Solution: 因为肯定有一个正确的答案,所以钻了一下空子,贪心 ...
- 关于SGA中的granule size
1.什么是granule? granule直译为颗粒,ORACLE为SGA 中的组件(eg:log buffer/db buffer/large pool等)分配的最小单元为一个granule. 所以 ...
- 从navicat中导入sql文件过大:Got a packet bigger than 'max_allowed_packet' bytes
失败背景:刚才通过navicat向本地mysql数据库中导入sql文件.第一个sql文件(多个表)大小为967M,导入成功: 第二个sql(单个表)大小为50.1M,导入失败. 1.在navicat中 ...
- 火狐浏览器安装 Modify Headers 插件
一.火狐浏览器插件安装 这里以火狐浏览器的Modify Headers插件安装为例,展示火狐插件的安装: 1.打开火狐浏览器,右上角选择“附加组件” 2.搜索Modify Headers插件 3.安装 ...
- 抽取JDBC工具类并增删改查
抽取工具类: package demo; /* * 工具类 */ import java.sql.Connection; import java.sql.DriverManager; import j ...
- Java-大数据方向学习和已掌握知识点整理
现在的项目是大数据相关项目,一路走来从最初的 C 开发到 Java 再到 大数据,不容易 大数据方向知识点太多,优先掌握了主流的一些技术并运用到了现在的项目中 另外也整理了一份java开发和项目管理方 ...
- HoloLens开发手记-硬件细节 Hardware Detail
微软HoloLens是世界第一款完全无线缆的全息计算机.通过在新方式上赋予用户的全息体验,HoloLens重新定义了个人计算(Personal Computing).为了将3D全息图形固定到你周围的真 ...
- .NET手记-JS获取Url参数
最近为App做活动专区,其中很多活动都是采用html 5页面来制作的.一方面体量较小,制作快速,更新维护容易:另一方面,嵌入App后适配效果也不会很差. 这里我们采用混编形式来从native app传 ...
- nrf52832 SDK 15.3.0 Flash 操作
debug中遇到的问题: 1,写入数据,读出来不对 2,看之前被人写的代码发现,读flash直接用的标准C库函数:memcpy,但是,写用的专门的flash写接口.所以,我这里两个疑问: A,写fla ...
- TCP/IP 笔记 - 用户数据报协议和IP分片
关于本章中的IP分片部分,参考第五章IP分片头部知识点.需要注意的是,TCP有超时重传,UDP的超时重传则依赖上层应用程序实现. 用户数据报协议(UDP) UDP是一个简单的面向无连接.不可靠的数据报 ...