cookie 、localStorage 和 sessionStorage 区别

   SessionStorage， LocalStorage， Cookie 这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于 HTML5 WebStorage，创建它们的目的便于客户端存储数据。而 cookie 是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密）。cookie 数据始终在同源（协议、主机、端口相同）的 http 请求中携带（即使不需要），会在浏览器和服务器间来回传递。存储大小：cookie 数据大小不能超过4 k 。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。有期时间：localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。sessionStorage  数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。cookie          设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。作用域：sessionStorage  只在同源的同窗口（或标签页）中共享数据，也就是只在当前会话中共享。localStorage    在所有同源窗口中都是共享的。cookie          在所有同源窗口中都是共享的。

浏览器端常用的存储技术是 cookie 、localStorage 和 sessionStorage。

cookie： 其实最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端(浏览器)存储，然后每次发起同源请求时，发送给服务器端。cookie 最多能存储 4 k 数据，它的生存时间由 expires 属性指定，并且 cookie 只能被同源的页面访问共享。

 document.cookie = "cookieName=something; expires=Fri Aug 16 2019 10:08:34 GMT+0800; path=/dir;domain=myblog.com; max-age=3600; secure=true";

sessionStorage： html5 提供的一种浏览器本地存储的方法，它借鉴了服务器端 session 的概念，代表的是一次会话中所保存的数据(存储在浏览器)。它一般能够存储 5M 或者更大的数据，它在当前窗口关闭后就失效了，并且 sessionStorage 只能被同一个窗口的同源页面所访问共享。
localStorage： html5 提供的一种浏览器本地存储的方法，它一般也能够存储 5M 或者更大的数据。它和 sessionStorage 不同的是，除非手动删除它，否则它不会失效，并且 localStorage 也只能被同源页面所访问共享。

上面几种方式都是存储少量数据的时候的存储方式，当需要在本地存储大量数据的时候，我们可以使用浏览器的 indexDB 这是浏览器提供的一种本地的数据库存储机制。它不是关系型数据库，它内部采用对象仓库的形式存储数据，它更接近 NoSQL 数据库。

详细的资料可以参考：《请描述一下 cookies，sessionStorage 和 localStorage 的区别？》《浏览器数据库 IndexedDB 入门教程》

cookie 、localStorage 和 sessionStorage 区别相关推荐

【面试题】详解Cookie、localStorage、sessionStorage区别
[面试题]详解Cookie.localStorage.sessionStorage区别三者基本概念 Cookie localStorage sessionStorage 安全性的考虑 Cookie. ...
Cookie, LocalStorage 与 SessionStorage异同
不同 cookie由服务端生成,用于标识用户身份:而两个storage用于浏览器端缓存数据一般情况下浏览器端不会修改 cookie,但会频繁操作两个storage cookie有path概念,子路径 ...
解决浏览器存储问题，不得不了解的cookie,localStorage和sessionStorage
浏览器存储方式一.浏览器存储的方式二.cookie.localStorage和sessionStorage 1.cookie.localStorage和sessionStorage是什么? (1) ...
详说 Cookie, LocalStorage 与 SessionStorage
本文最初发布于我的个人博客:咀嚼之味最近在找暑期实习,其中百度.网易游戏.阿里的面试都问到一些关于HTML5的东西,问题大多是这样开头的:"你用过什么HTML5的技术呀?" 而后 ...
cookie、localStorage和sessionStorage区别
三者区别见下表: 说明: cookie的处理过程为: 服务器向客户端发送cookie 浏览器将cookie保存之后每次http请求浏览器都会将cookie发送给服务器端 sessionStorage ...
说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？
1.看看他们在哪里 2.前端使用cookie和服务器种cookie 前端使用后端使用初始化一个express项目 npmiexpress-generator -g express 项目根目录名称 ...
浏览器本地存储Cookie、LocalStorage、SessionStorage
文章目录浏览器本地存储浏览器本地存储浏览器本地存储方式 (1)Cookie Cookie 是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个 ...
cookie html5,HTML5——存储（cookie、localStorage、sessionStorage）的区别
cookie 本来用于客户端和服务端通信, 但是因为它有本地存储的功能,于是被"借用"了. 使用方法 document.cookie 获取和修改即可缺点存储量太少,只有4kb ...
各种本地存储对比 cookie，localStorage，sessionStorage，indexDB以及他们和vuex的区别
cookie 存储在cookie中的数据,每次都会被浏览器自动放在http请求中,如果这些数据并不是每个请求都需要发给服务端的数据,浏览器这设置自动处理无疑增加了网络开销:但如果这些数据是每个请求都需 ...
Cookie、session以及localStorage与sessionStorage之间的区别
一.Cookie.session和localStorage的区别 cookie的内容主要包括:名字.值.过期时间.路径和域.路径与域一起构成cookie的作用范围.若不设置时间,则表示这个cooki ...

cookie 、localStorage 和 sessionStorage 区别

cookie 、localStorage 和 sessionStorage 区别相关推荐

最新文章

热门文章