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

共享几个关于 localStorage 的面试题：

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

惯例答复

localStorage 和 sessionStorage 以及 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，也要知道怎么处理。