sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的。
Web Storage带来的好处:减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递。快速显示数据:性能好,从本地读数据比通过网络从服务器获得数据快得多,本地数据可以即时获得。再加上网页本身也可以有缓存,因此整个页面和数据都在本地的话,可以立即显示。临时存储:很多时候数据只需要在用户浏览一组页面期间使用,关闭窗口后数据就可以丢弃了,这种情况使用sessionStorage非常方便。

浏览器本地存储与服务器端存储之间的区别其实数据既可以在浏览器本地存储,也可以在服务器端存储。
浏览器端可以保存一些数据,需要的时候直接从本地获取,sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
服务器端也可以保存所有用户的所有数据,但需要的时候浏览器要向服务器请求数据。1.服务器端可以保存用户的持久数据,如数据库和云存储将用户的大量数据保存在服务器端。2.服务器端也可以保存用户的临时会话数据。服务器端的session机制,如jsp的 session 对象,数据保存在服务器上。实现上,服务器和浏览器之间仅需传递session id即可,服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效,这个时间就是server端设置的session有效期。
服务器端保存所有的用户的数据,所以服务器端的开销较大,而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。浏览器端一般只用来存储小数据,而服务器可以存储大数据或小数据。服务器存储数据安全一些,浏览器只适合存储一般数据。

sessionStorage 、localStorage 和 cookie 之间的区别
共同点:都是保存在浏览器端,且同源的。区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

localStorage,sessionStorage和cookie的区别的更多相关文章

  1. 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

    本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)       1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项 ...

  2. localstorage sessionstorage和cookie的区别

    基本概念 cookie:是网景公司的前雇员在1993年发明.它的主要用于保存登陆信息,比如登陆某个网站市场可以看到'记住密码’,这就是通过在cookie中存入一段辨别用户身份的数据来实现的. sess ...

  3. localStorage、sessionStorage和cookie的区别

    本地客户端(浏览器)查看三者信息: HTML4的本地存储:cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等根服务端进行数据交互. 一.co ...

  4. 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  5. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

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

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

  7. localStorage、sessionStorage、cookie的区别

    localStorage: 存储的内容大概20MB 不同浏览器不能共享,但是在同一浏览器的不同窗口中可以共享 永久生效,它的数据是存储的硬盘上,并不会随着页面或者浏览器的关闭而清楚,需手动清除 ses ...

  8. localStorage. sessionStorage、 Cookie不共同点:(面试题)

    ●存储大小的不同: localStorage的大小一般为5M sessionStorage的大小一般为5M cookies的大小一般为4K ●有效期不同: 1.localStorage的有效期为永久有 ...

  9. localStorage、sessionStorage、Cookie的区别及用法

    1.webstorage 本地存储,存储在客户端,包括localStorage和sessionStorage. (1)localStorage:生命周期是永久,这意味着除非用户显示在浏览器提供的UI上 ...

随机推荐

  1. phantomjs 中文文档

    phantomjs 中文文档 转载 入门教程:转载 http://www.cnblogs.com/front-Thinking/p/4321720.html 1.介绍 简介   PhantomJS是一 ...

  2. Solve fatal error: helper_math.h: No such file or directory

    When the 'fatal error: helper_math.h: No such file or directory' occurs, it means the 'helper_math.h ...

  3. centos下静默安装oracle11g

    一.安装依赖包 yum -y install gcc make binutils gcc-c++ compat-libstdc++-33 elfutils-libelf-devel elfutils- ...

  4. js判断设备是否为安卓

    var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > - ...

  5. 洛谷P1115 最大字段和【线性dp】

    题目:https://www.luogu.org/problemnew/show/P1115 题意: 求给定数组的最大区间和. 思路: $dp[i][0]$表示以1~i的数组,不选i的最大字段和.$d ...

  6. spring boot异常积累

    1.异常:Error resolving template "xxx", template might not exist or might not be accessible.. ...

  7. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. 使用sysbench压测磁盘io

    Ⅰ.sysbench安装 cd /usr/local/src yum -y install make automake libtool pkgconfig libaio-devel git clone ...

  9. 前端开发-日常开发沉淀之git提交文件忽略

    .gitignore文件里添加需忽略的文件,或需要提交的文件 # Created by .ignore support plugin (hsz.mobi) ### VisualStudioCode t ...

  10. CSS实现标题/段落省略效果的三剑客

    white-space: nowrap;overflow:hidden;text-overflow:ellipsis; 效果如下: