【面试解题思路】关于 localStorage 的常规回答以及加分回答

共享几个关于 localStorage面试题:

  • 【★】localStoragesessionStorage 有什么差异?
  • 【★★】怎么让 localStorage 完成和 cookie 相同的主动过期功用?
  • 【★★★】文中提到 localStorage 一般浏览器支撑的是 「5M」 巨~ ^ O K S @ & 8 n细,超过了会怎么样?
  • 【★★★★】loc] | A LalL s x k =Storage 的跨域了解么?

惯例答复

localStoragesessionStorage 以及 cookie 的差异,是一个h 3 x L 4 U _ ! @比较惯例的面试题,现在许多面试也现已不问了a G n s S

咱们能够从几个方面来进行比照:

  • 生命周期
  • 容量
  • 服务端交互
  • API 是否友爱

详细不打开了,自行了解。

这仅仅惯例答复,假如想要答复的更好= 0 4 v &,能够打开这样说:

加分答复

在问第一个问 ! } x _题时

生命周期

localStorage 是长效存储的,可H T j % 7 l n –是有的场景期望用它来完成数据缓存功用,并且像 cookien O $ J a y * 相同能够设置时刻,这该怎么处理。比如:

/**
*设置本地存储
*@param{string6 T *}nah k C i z hmekey
*@param{*}vale P ; ` nuevalue能够是string、obj等
*@param{number}time缓存时刻(ms)
*/

exportconstsetSb j { I N E n x 6torage=(name,data,cacheTime)=>{
if(!name)return;
conststorage={
cr] ! | Z }eatedTime:newDate().getTime(),
cacheTime,
data,
};
window.Q J b W ] b O ^locz m M ; 2 R HalStorage.setItem(name,JSON.stringify(storage));
}

/**
*h 4 F | W获取本地存储
*假如未设置缓存时刻或许在缓存时刻内则回来数据
*假如过期则回来undefined
*@# l L 5 [ !param{string}namekey
*/

exportconstgetStorage=name=>{
if(!nameQ U P p f)return;
conststorage=JSON.parse(window.localStorage.getItem(name));
if(!stoh Y z 0 r crage)return;
if(storage.cachK ` n _ 5 H ? z ,eTime&&am0 @ vp;newDate().getTime()-storage.createdTime>storage.cacheTime){
clearStorage(name);
return;
}
returnstorage.dac x X + hta;
}

/**
*铲除本地存储
*@param{string}namekey
*/

exportconstclearStorage=name=>{
if(!name)return;
window.localStor/ 1 Y i , #age.removeItem(name);
}

简略的写了一下,能够再看看。

容量

能够说一下假如超过了 localStorage+ 1 G 设置的 5M 容量会怎么样,怎么& s d ! l安全地运用 l6 W 3 ? L z k g |ocalStorage。一般来说,只需标准合理的办理 localStorage,是不会出现这种状况的,反正我是没O W W d M遇到过。

不过假如真需求存储一个超级长的字符串,或许假如存了一个图片的 base64,也要知道怎么处理。

  • T M & q s (别是否超容量
  • 假如超容量能够运用 indexDB 或许 提示用户满了然后清掉之前的

API 是否友爱

localStorage 是键值对的结构,运用起来比较便利,能够 getItem/setIte[ , A | U C g Vm,甚至直接 localStorage.xxx 都能够(当然最好不要这样)。

cookie 的存取就比较费事,当然业界也有封装好的办法能够运用。

跨域

因为 cookie 不允许跨域拜访,为了突破这个约束,能够运用 postH z , : 2 $messagelocalstorage 进行数据跨域同享。

之前没遇到过相 o c关场景,也没怎么研讨,学到了学到了。

先保藏了,感兴趣的同学看:运用 localstorage 替代 cookie 完成跨域同享q [ ; } {数据。

这样一套组合拳打出来,KO。

. * o考文章

  • localStorage | MDN
  • sessionStorage | MDN
  • localstorage^ E ! = } 0 , _ ~ 必知必会
  • localStorage 还能这么用
  • 运用 localstorage 替代 cookie 完成跨域同享数据

沟通

欢迎重视大众号前端试炼,大众号平时会共享一些有用或许有意思的东西,发现代码之美。专心深度和最佳实践,期望打造一个高质量的大众号。偶尔还会共享一些摄影 ~

【面试解题思路】关于 localStorage 的常规回答以及加分回答

大众号后台回复加群,拉你进沟通划水聊天群,有看到好文章/代码都会发E 6 r B a : W X L在群里。

假如你不想加群,仅仅想加我也是能够。

发表评论

提供最优质的资源集合

立即查看 了解详情