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. Cura - CuraEngine - 架构分析

    参考: https://blog.csdn.net/justdoithai/article/details/52746094

  2. IMAGE WATCH工具安装与学习

    1.下载安装 从下载地址搜索IMAGE WATCH,即可下载自己所需要的IMAGE WATCH工具. 安装ImageWatch,双击ImageWatch.vsix进行安装即可: 2.使用示例 这里首先 ...

  3. Altera 在线资源使用

    Altera 在线资源使用 Altera 在线资源使用 1 1.Altera中文版 2 2.建立myaltera账户 获取官网信息与支持 2 3系统化的设计资源 2 3.1.设计实例 2 3.2.参考 ...

  4. pwm互补输出 死区设置

    void TIM8_PWM_Init(u16 arr,u16 psc){       GPIO_InitTypeDef GPIO_InitStructure;    TIM_TimeBaseInitT ...

  5. vmware平台下两次网络不通的诡异事件

      首先表明以下两种情况确实很少见,也可以说确实非常奇怪,无法定位原因由于机缘巧合确实出现了,虽然本文没有找到根因,但是希望能帮遇到类似问题的同学一点思绪. RouteOS内网网卡不可用   首先强调 ...

  6. VS从数据库表生成Model代码

    1.工具——扩展和更新——安装下列插件 2.如图所示,在项目或者MODEL文件夹下添加 3.如图所示,生成了一个datanase.11 4.打开该文件后,将数据库连接字符串改为你自己项目中WebCof ...

  7. Ubuntu18.04安装网易云音乐

    一. 安装 去网易云官网下载对应于ubuntu系统的安装包 安装依赖 dpkg -s libcanberra-gtk-module #检查依赖是否安装 sudo apt install libcanb ...

  8. web API简介(一):API,Ajax和Fetch

    概述 今天逛MDN,无意中看到了web API简介,觉得挺有意思的,就认真读了一下. 下面是我在读的时候对感兴趣的东西的总结,供自己开发时参考,相信对其他人也有用. 什么是API API (Appli ...

  9. [CocoaPods]使用CocoaPods

    将Pod添加到Xcode项目中 在你开始之前 检查Specs存储库或cocoapods.org以确保您要使用的库可用. 在您的计算机上安装CocoaPods. 安装 创建Podfile,并添加依赖项: ...

  10. Swift5 语言指南(一) 关于Swift

    Swift是编写软件的绝佳方式,无论是用于手机,台式机,服务器还是其他任何运行代码的软件.它是一种安全,快速,交互式的编程语言,它将现代语言思维的最佳结合与来自更广泛的Apple工程文化的智慧和来自开 ...