专栏首页较真的前端关于客户端存储的前端面试题总结

关于客户端存储的前端面试题总结

对于前端开发者来说,如果开发经验不够充足的话,是很难知道客户端存储其实是有很多坑的。今天就来总结一些关于客户端存储的面试题,其实参加面试时一般面试官不会问这么深入,但如果你能回答的比他期望的深入的话,相信会有加分。

本文首发于前端面试总结——知乎专栏,可以通过点击文章底部的阅读原文来访问知乎地址。

问题列表

  1. 常用的客户端存储方法有哪些?
  2. cookie、sessionStorage和localStorage的区别
  3. cookie由哪些部分组成?
  4. 如何用原生JS方法来操作cookie
  5. 在Hybrid环境下(混合应用),使用客户端存储应该注意哪些?
  6. sessionStorage和localStorage存储的数据类型是什么?
  7. session级存储中,session cookie和sessionStorage有哪些区别?

答案列表

1.常用的客户端存储方法有哪些?

平时前端开发中用到最多的是cookie、sessionStorage、localStorage,也有少量的业务场景会使用indexedDB。

2.cookie、sessionStorage和localStorage的区别

(敲黑板啦,这题必考)

很多博客上会提到此题,但是一般说的都很浅。我觉得可以从以下几个方面说:

存储时效来说:

  • cookie可以手动设置失效期,默认为会话级
  • sessionStorage的存储时长是会话级
  • localStorage的存储时长是永久,除非用户手动利用浏览器的工具删除

访问的局限性:

  • cookie可以设置路径path,所有他要比另外两个多了一层访问限制
  • localStorage和sessionStorage的访问限制是文档源级别,即协议、主机名和端口
  • 还要注意的是,cookie可以通过设置domain属性值,可以不同二级域名下共享cookie,而Storage不可以,比如http://image.baidu.com的cookie http://map.baidu.com是可以访问的,前提是Cookie的domain设置为".http://baidu.com",而Storage是不可以的(这个很容易实验,就不细说了)

存储大小限制:

  • cookie适合存储少量数据,他的大小限制是个数进行限制,每个浏览器的限制数量不同
  • Storage的可以存储数据的量较大,此外他是通过占用空间大小来做限制的,每个浏览器的实现也是不同的,大家可以看这篇文章来进一进步了解Web Storage Support Test http://dev-test.nemikor.com/web-storage/support-test/

操作方法:

  • cookie是作为document的属性存在,并没有提供标准的方法来直接操作cookie
  • Storage提供了setItem()和getItem()还有removeItem()方法,操作方便不易出错

其他:

  • cookie在发送http请求时,会将本地的cookie作为http头部信息传递给服务器
  • cookie可以由服务器通过http来设定

3.cookie由哪些部分组成?

大家一般都是用已有的库来操作cookie,很少有人利用原生方法直接操作cookie,所以cookie究竟由哪些部分也会被人忽视。

除了基础的键值对外,cookie还有下面的属性:

  • Expires :cookie最长有效期
  • Max-Age:在 cookie 失效之前需要经过的秒数。(当Expires和Max-Age同时存在时,文档中给出的是已Max-Age为准,可是我自己用Chrome实验的结果是取二者中最长有效期的值)
  • Domain:指定 cookie 可以送达的主机名。
  • Path:指定一个 URL 路径,这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部
  • Secure:一个带有安全属性的 cookie 只有在请求使用SSL和HTTPS协议的时候才会被发送到服务器。
  • HttpOnly:设置了 HttpOnly 属性的 cookie 不能使用 JavaScript 经由 Document.cookie 属性、XMLHttpRequest 和 Request APIs 进行访问,以防范跨站脚本攻击(XSS)。

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有什么?

大体的概括就是说:

  • sessionStorage的会话基于标签,即标签关闭则会话终止,而cookie基于浏览器进程。
  • sessionStorage的访问必须基于会话继承和延续,即只有在当前标签下或当前标签打开的标签下可以访问sessionStorage中的数据,而cookie是可以跨标签进行访问的。

本文分享自微信公众号 - 较真的前端(gh_7af41a2be77e),作者:英俊潇洒你冲哥

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-12-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 互动交流——第2期

    小编:MDN是一个供Web开发者学习的网站,里面的知识点够全够深,个人觉得比W3cSchool强很多。。。

    用户1687375
  • 客户端会话级存储:session Storage与session Cookie的区别

    用户1687375
  • 关于如何做一个“优秀网站”的清单——基础篇

    用户1687375
  • 一文看懂Cookie奥秘

    Cookie是什么?cookies是你访问网站时创建的数据片段文件,通过保存浏览信息,它们使你的在线体验更加轻松。 使用cookies,可以使你保持在线登录状态...

    小码甲
  • 实用主义:前端cookie介绍及操作封装

    MrTreasure
  • Python的Cookie详解

    CookieJar——>派生——>FileCookieJar——>派生——>MozillaCookieJar和LwpCookieJar

    py3study
  • Cookie——客户端存储

    cookie API 是通过document.cookie属性来实现的。cookie是存储在访问者的计算机中的变量,与页面相关联。

    Html5知典
  • 14.Django基础之jQuery操作cookie

      定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术;

    changxin7
  • 网络基础 cookie详解

    session cookie储存在浏览器内存中,针对某一次会话而言,会话结束session cookie也就随着消失了;

    授客
  • Jmeter接口测试实战-有趣的cookie

    接口测试时常都需要登录,请求方式(post), 登录常用的方法有通过获取token, 获取session, 获取cookie, 等等. 这几种都有一个共同的特点...

    louiezhou001

扫码关注云+社区

领取腾讯云代金券