indexDB 是为了能够在客户端存储客观数量的结构化数据,并且在这些数据上使用索引进行高性能的检索。DOM存储对于少量数据是非常友好的,但不适合存储大量结构化数据,indexDB就是为了解决这个问题而生的。
indexDB 分别为同步和异步访问提供了单独的API,同步API本打算供Web Worker内部使用,但目前还未实现。异步API在Web Worker内部和外部都可以使用,另外浏览器对indexDB有50M大小限制。
indexDB主要特点有:
-
indexDB大小取决于你的硬盘,存储的数据量非常大。
-
可以直接存储任何类型的数据,如 js任何类型的数据 、blob流。
-
可以创建索引,提供高性能搜索功能。
-
采用事务,保证数据的准确性和一致性。
4、cookie
cookie指的就是会话跟踪技术。一般指网站为了辨别用户身份,进行session跟踪而而存储在用户本地终端上的数据,cookie一般通过http请求头发送到服务器。cookie主要特点有:
-
跨域限制,同一个域名下可多个网页内使用。
-
cookie可以设置有效期,超出有效期自动清除。
-
cookie存储大小在4K以内。
-
cookie的存储不能超过50个cookie。
-
只能存储字符串类型。
cookie常用操作:
setMaxAge - 设置cookie的有效期,时间单位是秒,负值时表示关闭浏览器后就失效,默认值为-1。
setDomain - 用于指定,只有请求指定域名才会带上该cookie。
setPath - 只有访问该域名下的cookieDemo的这个路径地址才会带cookie。
setValue - 重置 value 。
5、localstorage
localStorage 是HTML5的一种新的本地缓存方案,目前使用比较多,一般存储ajax返回的数据,存储特点主要有:
-
数据可以长久保存,没有有效期,直到手动删除为止。
-
存储的数据量大,一般5M以内。
-
存储的数据可以在同一个浏览器的多个窗口使用。
-
存储的数据不会发送到服务器。
localStroage常用API如下:
localStorage.setItem(key,value) // 保存数据
localStorage.getItem(key) // 获取数据
localStorage.removeItem(key) // 删除单个数据
localStorage.clear() // 删除全部
6、sessionstorage
sessionStorage与上述localStroage类似,它的特点主要有:
-
存储的数据在浏览器关闭后删除,与网页窗口具有相同的生命周期。
-
可以存储的数据大小5M。
-
存储的数据不会发送到服务器。
sessionStorage常用API如下:
sessionStorage.setItem(key,value) // 保存数据
sessionStorage.getItem(key) // 获取数据
sessionStorage.removeItem(key) // 删除单个数据
sessionStorage.clear() // 删除全部
7、application cache
application cache是离线缓存技术,将大部分的图片、js、css等资源放在mainfest文件配置中,页面打开时通过mainfest文件读取本地文件或请求服务器资源。通常用于静态页面的缓存。
application cache特点:
- mainfest文件必须有变化时才会更新。
总结
=============================================================
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;如果因为我的笔记太过简陋不理解,可以关注我以后我还会继续分享。
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。