浏览器存储,储存,Cookie,WebStorage,IndexedDB
前言:
Cookie存储数据的功能已经很难满足开发所需,逐渐被WebStorage、IndexedDB所取代;
一、Cookie
什么是Cookie及应用场景
Cookie指网站为了储存一些信息,辨别,记录等,而储存在用户本地的数据;
Cookie一般是服务端生成,客户端进行维护和存储;
Cookie在所有同源窗口中都是共享的。除了保存期限的长短不同;
通过Cookie存储的信息,可以让服务器知道客户端的请求信息,客户端操作状态的维护,例如以前登录过以及登陆后操作等,根据Cookie值的信息就可以判断和恢复一些用户的信息状态;
Cookie以键值对的形式储存
典型的应用场景有:
1、记住密码,下次自动登录;2、购物车功能;3、记录用户浏览数据,进行商品内容推荐;
第一次访问网站的时候,浏览器发出请求,服务器响应请求后,会在响应头里面添加一个Set-Cookie选项,将cookie放入到响应请求中,在浏览器第二次发请求的时候,会通过Cookie请求头部将Cookie信息发送给服务器,服务端会辨别用户身份,另外,Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。
Cookie的设置:
js中可以通过document.cookie可以读写cookie,以键值对的方式;
document.cookie="userName=hello"
Cookie的获取:
function get_cookie(Name) {var search = Name + "=" // 查询检索的值var returnvalue = ""; // 返回值if (document.cookie.length > 0) {sd = document.cookie.indexOf(search);if (sd != -1) {sd += search.length;end = document.cookie.indexOf(";", sd);if (end == -1)end = document.cookie.length;// unescape() 函数可对通过 escape() 编码的字符串进行解码。returnvalue = unescape(document.cookie.substring(sd, end))}} return returnvalue;
}
// 使用方式:
get_cookie("userName");
Cookie的缺陷:储存不够多,性能消耗大,不够安全;
二、Web Storage
HTML5中新增了本地存储的解决方案----Web Storage,它分成两类:sessionStorage和localStorage。这样有了WebStorage后,cookie能只做它应该做的事情了——作为客户端与服务器交互的通道,保持客户端状态,其他的信息交互都可以交给WebStorage。
1、LocalStorage
储存时间:长
储存大小:2.5MB到10MB
储存范围:客户端使用,不和服务端进行通信
易用性:接口封装较好
LocalStorage浏览器本地缓存方案,用来提升网页首屏渲染速度(根据第一请求返回时,将一些不变信息直接存储在本地);下一次访问该网站的时候,网页可以直接读取以前保存的数据;
①、存入数据
// 存入数据使用setItem方法
// 它接受两个参数,第一个是键名,第二个是保存的数据。
// localStorage.setItem("key", "value");
<script>if(window.localStorage){localStorage.setItem('name','world')localStorage.setItem('gender','female')}
</script>
②、读取数据
// 读取数据使用getItem方法。
// 它只有一个参数,就是键名。
// var valueLocal = localStorage.getItem("key");
var valueLocal = localStorage.getItem("name"));
console.log(valueLocal);
③、使用场景
LocalStorage使用存储方面没有什么特别的限制,本地储存使用为主;
2、SessionStorage
储存时间:会话级别的浏览器存储,一次会话,当该窗口关闭,数据即被清空;
储存大小:2.5MB到10MB
储存范围:客户端使用,不和服务端进行通信
易用性:接口封装较好
注意:即便相同域名下的两个页面,只要不在同一个窗口,那么SessionStorage内容都无法共享;LocalStorage在所有同源窗口中都是共享的;
基于上面的特点,SessionStorage 可以有效对表单信息进行维护,比如刷新时,表单信息不丢失;并且在关闭浏览器后也不会保存;
使用场景
SessionStorage数据的储存是一次性的,仅仅使用在当前页面,开启新的页面之后,释放页面储存的SessionStorage信息;
使用方法
SessionStorage的使用与LocalStorage一样;
三、SessionStorage 、LocalStorage 和 Cookie 之间的区别
共同点
都是保存在浏览器端信息;
不同点
在于生命周期与作用域的不同;
作用域
LocalStorage只要在相同的协议、相同的主机名、相同的端口下,就能读取/修改到同一份LocalStorage数据;
SessionStorage比LocalStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口下;
生命周期
LocalStorage是持久化的本地存储,永远不会是失效,使其消失的唯一办法是手动删除;
SessionStorage是临时性的本地存储,它是一次性储存,当窗口页面关闭时,存储信息跟着释放;
---------------------------------------------------------
Web Storage是对Cookie的拓展,它只能用于存储少量的简单数据。
四、IndexedDB
将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据;
1、IndexedDB的特点
键值对储存
IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
异步
IndexedDB 操作时不会锁死浏览器是异步的,用户依然可以进行其他操作,这与 LocalStorage 形成对比,LocalStorage是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
支持事务
IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
同源限制
IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
储存空间大
IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
支持二进制储存
IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。
2、IndexedDB的常见操作
在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求——响应的模式。
建立打开IndexedDB
window.indexedDB.open("test");
这条指令并不会返回一个DB对象的句柄,我们得到的是一个IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中
除了result,IDBOpenDBRequest接口定义了几个重要属性:
onerror:请求失败的回调函数句柄
onsuccess:请求成功的回调函数句柄
onupgradeneeded:请求数据库版本变化句柄
建立:
<script>var myDB={name: 'test',version: '1.0',db: null}function openDB(name) {// 打开IndexedDBvar request = window.indexedDB.open(name); request.onerror = function(e) {console.log('open indexdb error');}request.onsuccess = function(e) {// 这是一个 IDBDatabase对象,这就是IndexedDB对象myDB.db = e.target.result; // 此处就可以获取到db实例console.log(myDB.db);}}openDB(myDB.name);
</script>
控制台得到一个 IDBDatabase 对象,这就是IndexedDB对象;
关闭IndexedDB
// indexdb.close();function closeDB(db){db.close();
}
删除IndexedDB
// window.indexedDB.deleteDatabase(indexdb);function deleteDB(name) {indexedDB.deleteDatabase(name)
}
区别:
特性 | Cookie | LocalStorage | SessionStorage | IndexDB |
---|---|---|---|---|
生命周期 | 服务器生成,可以设置时间 | 一直储存,只能手动清除 | 窗口关闭即清除 | 除非清理,否则一直在 |
数据储存大小 | 4K | 10M以下 | 10M以下 | 无限制 |
服务端通信 | 会携带header,性能有影响 | 无关 | 无关 | 无关 |
总结:
Cookie主要是“维持状态”;
Web Storage是不参与服务端发生通信,不怎么改变的数据尽量使用LocalStorage存储,一次性的可以用SessionStorage存储;
IndexedDB用于客户端存储大量数据;
最后感谢作者:https://juejin.im/post/5c8e6fa8e51d453ec75168cd
浏览器存储,储存,Cookie,WebStorage,IndexedDB相关推荐
- 计算机浏览器存储技术cookie、sessionStorage、localStorage
HTTP无状态协议是指协议对于事务处理没有记忆能力. 会话跟踪 协议的状态是指下一次传输可以"记住"这次传输信息的能力,无状态是指同一个会话(注意什么叫同一个会话) 的连续两个请求 ...
- 解决浏览器存储问题,不得不了解的cookie,localStorage和sessionStorage
浏览器存储方式 一.浏览器存储的方式 二.cookie.localStorage和sessionStorage 1.cookie.localStorage和sessionStorage是什么? (1) ...
- 浏览器本地存储(cookie、sessionStorage和localStorage)
1.Cookie 特点:存储大小4KB左右:可设置失效时间:通信时会携带在HTTP头中,使用cookie保存过多数据会影响性能. 注意:cookie的跨域可以理解为跨域名,只要二级域名相同,不涉及到端 ...
- 浏览器的存储方式——cookie,localStorage,sessionStorage
文章目录 一.cookies 二.sessionStorage.localStorage 总结 一.cookies 一.概念 cookie是客户端与服务器端进行会话使用的一个能够在浏览器本地化存储的技 ...
- 浏览器存储(cookie、localStorage、sessionStorage)
区别 cookie在浏览器请求中每次都会附加请求头中发送给服务器.用户代理(一般值浏览器)所实现的大小最少要到达4096字节(感谢@lulianqi15的指正) localStorage保存数据会一直 ...
- 前端缓存 浏览器存储
目录 前言 一.浏览器存储 0.bfcache 1.WebStorage (1).sessionStorage 对象 (2).localStorage 对象 2.Cookie (1).cookie 与 ...
- 三种浏览器存储方案,你还担心数据无处放吗
webStorage 基本概念 webStorage提供了两种存储方式,localStorage和sessionStorage. localStorage是持久化存储,不主动删除存储的内容会永久存在 ...
- 浏览器的储存方式有哪些
常见的浏览器存储主要有: 1.属于文档对象模型:documentcookie, 2.属于浏览器对象模型localStorage,sessionStorage,indexDB Cookie h5之前,存 ...
- 浏览器存储的方式有哪些
浏览器存储的方式有哪些 补充:cookie 原本并不是用来储存的,而是用来与服务端通信的,需要存取请自行封装 api. 而 localStorage 则自带 getItem 和 setItem 方法, ...
最新文章
- 三层交换机与路由器的比较
- 1亿美元,苹果把网易投资的VR公司收了
- webp app推荐图片格式,更小更快减少oom
- 最简单的dockerfile使用教程 - 创建一个支持SSL的Nginx镜像
- python如何实现模拟登录_超详细的Python实现新浪微博模拟登陆(小白都能懂)
- PyTorch 1.2 中文文档校对活动 | ApacheCN
- linux中进程unit是什么意思,Linux系统之进程及服务的控制
- verilog学习记(时序电路)
- 16.[个人]C++线程入门到进阶(16)----线程函数:CreateThread与_beginthread
- 微波雷达感应技术系统,车库智能照明应用,物联网智能化发展
- Flixel 横板游戏制作教程(一)— HelloFlixel ...
- 微信和QQ内置浏览器停止访问该网页,微信域名被屏蔽的解决方案
- Hadoop入门及官网教程
- MP4文件格式简要解析——图文代码并茂
- 关于dva框架的二三事
- multitail使用小技巧
- SPSSModeler的下载与安装
- 今天给大家分享scratch与数学,小猫绘画随机多边形!
- 2023最新SSM计算机毕业设计选题大全(附源码+LW)之java智能线上教育mo0l5
- 复购几乎为0的产品,怎么做线上推广?
热门文章
- [MySQL FAQ]系列 -- 账号密码包含反斜线时怎么办
- Oulipo(POJ-3461)
- 信息学奥赛一本通C++语言——1065:奇数求和
- Minimum Window Substring 最小覆盖子串算法
- 7 CO配置-控制-一般控制-维护版本
- allan方差 imu_MEMS-IMU随机误差的Allan方差分析
- linux内核make menuconfig执行过程
- 点云3D目标检测学习(1):pointnet、pointnet++模型
- opencv学习笔记2
- OpenGL:关于获取渲染结果的深度信息的问题(二)