浏览器本地数据存储解决方案以及cookie的坑

本地数据存储解决方案以及cookie的坑

问题：

cookie过长导致页面打开失败

背景：

在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab（iframe），但是需要在刷新时只刷新当前页面仍然保留着多个iframe，现在刷新有两种方式，第一种是键盘中按F5或者ctrl+F5或者ctrl+R，第二种是点击浏览器的左上角进行刷新，点击F5时可以通过监听键盘的F5点击事件进行阻止默认刷新达到只刷新当前iframe，但是当用户点击浏览器的刷新后必须请求后端重新加载页面，所以这时需要记录下当前打开的一些iframe的信息，包括href等。

解决点击F5只刷新本iframe：

代码如下：

//F5键 F5 和 ctrl R 只刷新当前iframe
document.onkeydown = function (e){
    e = e || window.event;
    if((e.ctrlKey && e.keyCode == 82) || e.keyCode == 116) {//F5 和 ctrl R 刷新，禁止
        var cur_href= window.location.href; //获取到当前iframe的href
        e.preventDefault();      //阻止默认刷新
        location.href=cur_href;  //刷新当前iframe
    }
}

解决点击浏览器刷新（大坑）：

这时，点击浏览器的刷新后必然会想服务端重新请求地址获取信息，所以在前边打开多个iframe的过程中必须保留打开的iframe的href以及title等信息，这时坑就来了。

解决方案一： 把打开的iframe的信息保存在后端，每打开一个iframe就向后端发请求保存iframe的信息，打开多个就进行追加

优点：

• 简单粗暴

缺点：

• 每打开或者关闭一个iframe都得请求后端，存在效率等问题

解决方案二之cookie大坑： 不把打开的iframe信息保存在后端，保存在浏览器本地的cookie中

优点：

• 简单粗暴
• 数据在本地，不会与后端交互，效率高

缺点：

• cookie是有大小限制的，每个域名下个数有限制，重要的是每个cookie的数据大小不能超过4kb（局限性最大的点）
• cookie的有效时间设置，如果不设置失效时间就会一直保存在本地，关闭浏览器也会保存在硬盘中，不会自动销毁，最终导致数量可能过多
• 安全性不高
• 每次访问都要传送cookie给服务器，浪费带宽

当时做的时候就是没考虑到本项目中其他同事也用到了大量的cookie同时没考虑到用户打开大量iframe后导致该cookie值超过4kb的限制，最终导致cookie过长使得页面打开失败（吃一堑长一智）

解决方案三之localStorage: 把ifrmae的信息保存在localStorage中

优点：

• 简单
• 存储大小为5M，足够使用
• 保存在本地，不会与后端交互

缺点：

• 保存在localStorage中的数据数永久保留在本地，关闭会话（浏览器tab的关闭或关闭浏览器不会销毁）
• 由于需求是用户关闭浏览器tab或者关闭浏览器之后就清除这些保存的iframe的信息，所以localStorage中的数据无法清理（原因：js无法监听浏览器的关闭）

解决方案四之sessionStorage:把ifrmae的信息保存在sessionStorage中

优点：

• 简单
• 存储大小为5M，足够使用
• 保存在本地，不会与后端交互
• 基于会话存在，会话关闭数据清理（正好符合了产品的需求，完美解决）

涉及到的方法：

保存localStorage：localStorage.setItem("key","value");
获取localStorage：localStorage.getItem("key");

保存sessionStorage：sessionStorage.setItem("key","value");
获取sessionStorage: sessionStorage.getItem("key");