简单说下cookie,LocalStorage与SessionStorage.md
最近在网上看到有人讨论这三个的一些概念与区别,发现自己也一直没有较好的总结,所以查阅了一些资料来阐述一下。
基本概念
cookie
cookie英文意思是小甜饼,是原来的网景公司创造,目前是在客户端存储数据的一种选项,cookie一般是由服务器端生成,绑定在特定的域名之下,当设定一个cookie之后再给创建它的域名发送请求都会包含这个cookie,大多数浏览器对cookie的尺寸也有限制大约4kb左右。
LocalStorage与SessionStorage
sessionStorage 与 localStorage 的接口类似,都是HTML5中的新的API,也是用于客户端的储存,但SessionStorage保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思,直译过来是“会话”。而 sessionStorage 是一个前端的概念,它只是可以将一部分数据在当前会话中保存下来,刷新页面数据依旧存在。但当页面关闭后,sessionStorage 中的数据就会被清空。
三者的异同
有一个图可以很清晰的反应:
共同点:都是保存在浏览器端,且同源的。
区别:
1.cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
2.存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
3.数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
4.作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
5.Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
6.Web Storage 的 api 接口使用更方便。
安全性的问题
我们必须知道这三种都有可能面临安全问题,最安全的方法肯定是服务器端session方法。但会话数据仅在一段时间内有效,这个时间就是server端设置的session有效期。
参考资料
What is the difference between localStorage, sessionStorage, session and cookies?
详说 Cookie, LocalStorage 与 SessionStorage
简单说下cookie,LocalStorage与SessionStorage.md的更多相关文章
- Cookie, LocalStorage 与 SessionStorage
Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点 同属于html5 ...
- 区分 Cookie, LocalStorage 与 SessionStorage
基本概念 Cookie Cookie 的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码 ...
- 详说 Cookie, LocalStorage 与 SessionStorage
本文最初发布于我的个人博客:咀嚼之味 最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:“你用过什么HTML5的技术呀?” 而后,每次都能扯到 Co ...
- cookie,localStorage和sessionStorage区别
三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...
- Cookie, LocalStorage 与 SessionStorage说明
一.Cookie Cookie 大小限制为4KB左右,不适合大量数据的存储.因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高.它的主要用途有保存登录信息,比如你 ...
- 简单总结下 cookie、session
Cookies: 定义:cookie 中文意思是"小甜饼",但是,在互联网中它跟食品没有半毛钱关系,它主要是由web服务器应用程序创建,在客户端计算机中保存,问题来了, ...
- cookie,localStorage和sessionStorage的区别
cookie已经很久没有用过了,一直觉得session Storage和local Storage更加好用一些.
- 深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB
摘要: 对比Cookie.LocalStorage.sessionStorage与IndexedDB 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 随着移动网络的发展与演化,我 ...
- HTML5本地存储localStorage、sessionStorage及IE专属UserData
By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属, ...
随机推荐
- 如何安装 mcrypt
#cd libmcrypt-2.5.8 #./configure #make #make install 说明:libmcript默认安装在/usr/local3.安装mhash #tar -zxvf ...
- oracle 字段信息
oracle 修改字段的长度alter table tablename modify column_name varchar2(32)alter table tablename modify (col ...
- CodeForces - 35D
题目:https://vjudge.net/contest/326867#problem/A 题意:有一个农场,自己有m斤粮食,有n天,每天动物吃的量不同,那个动物的食量的是由他是从那天开始进这个农场 ...
- flutter输入颜色枚举卡顿假死
AndroidStudio 3.3.2 遇到 flutter输入颜色枚举卡顿假死,目前没好的解决方案,可以设置显示时间或者关闭popup窗口显示文档,这样就不会卡顿了 下面示例代码在输入 Colors ...
- NuGet-Doc:承载自己的 NuGet 源
ylbtech-NuGet-Doc:承载自己的 NuGet 源 1.返回顶部 1. 可能希望将包仅发布到有限受众(例如,组织或工作组),而不是将其公开发布. 此外,一些公司可能希望限制其开发人员可以使 ...
- Gradle查看Project中的所有 Task
查看Project中所有的Task:$ gradle tasks 查看Project中所有的properties:$ gradle properties 如: 参照了: https://www.jia ...
- day11—前端学习之我不想看书
转行学开发,代码100天——2018-03-27 今天是前端学习,博客记录见证的第11天,按理说还要继续写一写代码相关的内容. 但由于今天的代码实践都是一些基础知识,还是想谈一谈关于编程方面看书的事情 ...
- java反射机制-简单实例
public class Car { private String brand; private String color; private int maxSpeed; public Car() { ...
- 【ABAP系列】SAP 后台JOB如何DEBUG
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 后台JOB如何DEBUG ...
- Netty之大动脉Pipeline
Pipeline 设计原理 Channel 与ChannelPipeline: 相信大家都已经知道,在Netty 中每个Channel 都有且仅有一个ChannelPipeline 与之对应,它们的组 ...