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的区别的更多相关文章

  1. Cookie localStorage sessionStorage

    三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下(tab标签页)有 ...

  2. 大家都能看得懂的源码 - 如何封装 cookie/localStorage/sessionStorage hook?

    本文是深入浅出 ahooks 源码系列文章的第九篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 今天来看看 ahooks 是怎么封装 cookie/localSt ...

  3. cookie, localStorage, sessionStorage区别

    cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...

  4. 本地存储cookie,localStorage,sessionStorage

    常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage 他们之间的区别有以下几点 1.. cookie在浏览器和服务器间来回传递.而sessi ...

  5. 封装cookie localStorage sessionStorage

    var cookie = function(name, value, options) { if (typeof value !== 'undefined') { options = options ...

  6. [JavaScript] Cookie,localStorage,sessionStorage概述

    Cookie Cookie 是一些数据, 存储于你电脑上的文本文件中,当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息.Cookie 的作用就是存储 web 页面 ...

  7. H5新特性 本地存储---cookie localStorage sessionStorage

    本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...

  8. 简述cookie ,localStrage,sessionStorage的区别?

    1.cookie: 是一个回话跟踪技术,信息存储在用户硬盘,可以做全局变量. 什么是会话:用户进入网站,开始浏览到结束的这样的一个过程,称为一次会话. 会话跟踪技术:浏览器和服务器之间进行多次请求数据 ...

  9. cookie和localstorage sessionStorage的概念、区别、使用场景

    本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...

  10. 客户端 localStorage, sessionStorage, cookie 的区别

    SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对! 区别在于前两者属于WebStorage,创建它们的目的便是存 ...

随机推荐

  1. MySQL与SQL语句的操作

    MySQL与SQL语句的操作 Mysql比较轻量化,企业用的是Oracle,基本的是熟悉对数据库,数据表,字段,记录的更新与修改 1. mysql基本信息 特殊数据库:information_sche ...

  2. 8.AOP全自动

    CGLIB字节码增强 l没有接口,只有实现类. 采用字节码增强框架 cglib,在运行时 创建目标类的子类,从而对目标类进行增强. 导入jar包: 自己导包(了解): 核心:hibernate-dis ...

  3. Android 和 iOS 实现录屏推流的方案整理

    一.录屏推流实现的步骤 1. 采集数据 主要是采集屏幕获得视频数据,采集麦克风获得音频数据,如果可以实现的话,我们还可以采集一些应用内置的音频数据. 2. 数据格式转换 主要是将获取到的视频和音频转换 ...

  4. setAttribute的浏览器兼容性(转)

    1.element要用getElementById or ByTagName来得到, 2.setAttribute("class", vName)中class是指改变"c ...

  5. rocketmq搭建趟坑记

    这个坑对小白来讲可能要趟很久才能过,我就是这样~~明明很简单的配置,搞了半天 我用的是rocketmq4.1.0,配置了jvm参数,都能正常启动,且能在线上运行demo,但是线下就是连不上 在conf ...

  6. [译]ElasticSearch vs. Solr

    在Gen2产品的早期阶段, 我们事实上是失败的, 这促使我们重新审视我们现有的技术栈. 我们仔细分析系统中的每个独立的组件,并记录下来, 当然其中也包括构成我们核心功能的搜索引擎技术. 在我们的通用日 ...

  7. [P4318] 完全平方数

    想不出什么办法能直接算的(别跟我提分块打表),不如二分答案吧:设\(f(x)=\sum_{i=1}^n [i不是"完全平方数"]\), 显然f(x)与x正相关.再结合筛法.容斥,不 ...

  8. xamarin.Android ImageView 图片圆角(自定义属性、扩展控件)

    新增 /values/Attrs.xml 文件 <?xml version="1.0" encoding="utf-8" ?> <resour ...

  9. session失效时间设置

    session失效时间设置 一.java代码 request.getSession().setMaxInactiveInterval(1800);/*秒为单位*/ 二.web.xml <sess ...

  10. SpringBoot之OAuth2.0学习之客户端快速上手

    2.1.@EnableOAuth2Sso 这个注解是为了开启OAuth2.0的sso功能,如果我们配置了WebSecurityConfigurerAdapter,它通过添加身份验证过滤器和身份验证(e ...