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 存储过程 CONCAT 字符串拼接

    mysql 存储过程 CREATE PROCEDURE pro_province_report (IN startDate VARCHAR(),IN endDate VARCHAR(),IN Sour ...

  2. docker知识点杂记

    最近重新梳理了一下docker的一些基本知识,简单做了下总结.以后会逐步补充. 1.查看系统内核版本,需要3.10以上 $ uname -r 2.下载docker 说明:centos安装docker比 ...

  3. 【转】再有人问你Http协议是什么,把这篇文章发给他

    一.HTTP简介 1.HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相 ...

  4. sku 和 spu

    https://www.jianshu.com/p/867429702d5a     里面的图片挺好的

  5. Django 通过 mongoengine 连接 MongoDB 进而使用orm进行CRUD

    一. 在python脚本中, 我们通常可以使用pymongo模块实现与mongodb数据库的交互, 但是在使用Django框架进行定制开发的web server 项目中, 仍然使用pymongo模块的 ...

  6. 腾讯大数据之TDW计算引擎解析——Shuffle

    转自 https://www.csdn.net/article/2014-05-19/2819831-TDW-Shuffle/1 摘要:腾讯分布式数据仓库基于开源软件Hadoop和Hive进行构建,T ...

  7. Apple Watch笔记-应用内导航模式

    最近苹果婊上市,水果也发布了Xcode 6.2正式版,WatchKit也可以正常使用了.水果很及时地提供了Apple Watch的开发文档,我也及时地尝试着边学习边开发Watch App. 今天主要想 ...

  8. JavaScript的Date类的函数特殊处理导致的问题

    记得以前参加校招的时候,总是有日期相关的面试题,比如计算两个日期之间的间隔天数.以前还觉得这种题就是为了纯粹为了面试的,但工作了之后,还就碰到了跟日期相关的bug.下面是一段js代码,是要把字符串描述 ...

  9. 自动化测试框架的Step By Step搭建及测试实战(1)

    1.1什么是自动化测试框架 1.什么是自动化框架 自动化框架是应用与自动化测试的程序框架,它提供了可重用的自动化测试模块,提供最基础的自动化测试功能,或提供自动化测试执行和管理功能的架构模块.它是由一 ...

  10. C# Winform同时启动多个窗体类

    首先创建一个类,存放将要同时显示的窗体 using System; using System.Collections.Generic; using System.Linq; using System. ...