问题:
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的信息,打开多个就进行追加
优点:
缺点:
解决方案二之cookie大坑: 不把打开的iframe信息保存在后端,保存在浏览器本地的cookie中
优点:
缺点:
当时做的时候就是没考虑到本项目中其他同事也用到了大量的cookie同时没考虑到用户打开大量iframe后导致该cookie值超过4kb的限制,最终导致cookie过长使得页面打开失败(吃一堑长一智)
解决方案三之localStorage: 把ifrmae的信息保存在localStorage中
优点:
缺点:
解决方案四之sessionStorage:把ifrmae的信息保存在sessionStorage中
优点:
涉及到的方法:
保存localStorage:localStorage.setItem("key","value");
获取localStorage:localStorage.getItem("key");
保存sessionStorage:sessionStorage.setItem("key","value");
获取sessionStorage: sessionStorage.getItem("key");
有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......
在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等
在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解
由于http是无状态的协议,这种特性严重阻碍了客户端与服务器进行动态交互,为了弥补http的不足,目前实现会话跟踪的常用技术方法:cookie、session、url重写、隐藏input、ip地址。
localStorage 与 sessionStorage具体适用于什么样的业务场景?如何维护本地储存?如何进行版本控制?碰到禁止本地缓存的情况下怎么解决这个问题?
在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。
前端很多时候还是需要保存一些数据的,这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中,或者将key保存在cookie中,将其他数据保存在服务器上。想要一种能够长久的保存在本地的数据,类似数据库或者类似web sql。
因为Cookie是存储在客户端,用户可以随意修改。所以存在一定的安全隐患,服务器为每个Cookie项生成签名。如果用户篡改Cookie,则与签名无法对应上。以此,来判断数据是否被篡改。
后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢
我们都知道localStorage不主动删除,永远不会销毁,那么如何设置localStorage的过期时间呢?使用场景: 1.利用本地数据,减少网络传输 ,2.弱网络环境下,高延迟,低带宽,尽量把数据本地化
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!