对于前端开发者来说,如果开发经验不够充足的话,是很难知道客户端存储其实是有很多坑的。今天就来总结一些关于客户端存储的面试题,其实参加面试时一般面试官不会问这么深入,但如果你能回答的比他期望的深入的话,相信会有加分。
本文首发于前端面试总结——知乎专栏,可以通过点击文章底部的阅读原文来访问知乎地址。
问题列表
答案列表
1.常用的客户端存储方法有哪些?
平时前端开发中用到最多的是cookie、sessionStorage、localStorage,也有少量的业务场景会使用indexedDB。
2.cookie、sessionStorage和localStorage的区别
(敲黑板啦,这题必考)
很多博客上会提到此题,但是一般说的都很浅。我觉得可以从以下几个方面说:
存储时效来说:
访问的局限性:
存储大小限制:
操作方法:
其他:
3.cookie由哪些部分组成?
大家一般都是用已有的库来操作cookie,很少有人利用原生方法直接操作cookie,所以cookie究竟由哪些部分也会被人忽视。
除了基础的键值对外,cookie还有下面的属性:
4.如何用原生JS方法来操作cookie
上面已经说过了,在浏览器中cookie做为document的一个属性存在,并没有提供原生的操作方法,并且所有形式都以字符串拼接的形式存储,需要开发利用字符串操作的方法来操作document.cookie,从而达到操作客户端cookie的目的。
想操作cookie,必须知道document.cookie中存储的字符串是怎样的结构。
document.cookie返回的结构大概如下面的样子:
name1=value1; name2=value2; name1=value3
即:document.cookie返回当前页面可用的(根据cookie的域、路径、失效时间和安全设置)所有cookie的字符串,一系列由分号隔开的名值对儿。
当想设置cookie时,可以直接对document.cookie赋值,对document.cookie赋值并不会覆盖掉cookie,除非设置的cookie已经存在。设置cookie的格式如下,和Set-Cookie头中的使用的格式是一样的。
name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
上面这些参数中,只有cookie中的名字和值是必须的。下面是一个简单的例子:
此外,需要注意的是设置值时需要对于属性和值都用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).
5.在Hybrid环境下(混合应用),使用客户端存储应该注意哪些?
在混合应用中,主要是注意会话级存储——sessionStorage。
因为混合应用中的webview从一个页面跳转的另一个页面时,会话并没有像浏览器中那样是继承延续的,也就是说,当在A页面中设置的了sessionStorage值后跳转的下一个页面时,这是sessionStorage是全新的,根本获取不到A页面中设置的任何sessionStorage。
所以如果你们的app开发者还没有解决这个问题的话,建议这时使用session级别的cookie来代替sessionStorage,因为cookie是可以跨标签访问的,不要会话连续。
6.sessionStorage和localStorage存储的数据类型是什么?
sessionStorage和localStorage只能存储字符串类型的数据,如果setItem()方法传入的数据不是字符串的话,会自动转换为字符串类型再进行存储。所以在存储之前应该使用JSON.stringfy()方法先进行一步安全转换字符串,取值时再用JSON.parse()方法再转换一次。
7.session级存储中,session cookie和sessionStorage有哪些区别?
详细的分析可以看我之前的文章——同样是客户端会话级存储,sessionStorage和session cookie有什么?
大体的概括就是说: