本地数据存储解决方案以及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");
本地数据存储解决方案以及cookie的坑的更多相关文章
- 浏览器本地数据存储解决方案以及cookie的坑
本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...
- iOS开发技术分享(1)— iOS本地数据存储
iOS开发技术分享(1)— iOS本地数据存储 前言: 我本是一名asp.net程序员,后来加入了iOS游戏开发队伍,到现在也有一年多的时间了.这一年来,每天都干到2.3点钟才睡觉,不为别的,只为了学 ...
- Android本地数据存储复习
Android本地数据存储复习 Android无论是应用层还是系统层都需要在本地保存一些数据,尤其在应用层中使用的就更为普遍,大体有这么几种:SharedPreference,file,sqlite数 ...
- iOS开发——数据持久化&使用NSUserDefaults来进行本地数据存储
使用NSUserDefaults来进行本地数据存储 NSUserDefaults适合存储轻量级的本地客户端数据,比如记住密码功能,要保存一个系统的用户名.密码.使用NSUserDefaults是首 ...
- iOS APP之本地数据存储(译)
最近工作中完成了项目的用户信息本地存储,查阅了一些本地存储加密方法等相关资料.期间发现了一个来自印度理工学院(IIT)的信息安全工程师的个人博客,写了大量有关iOS Application secur ...
- Windows 8 应用开发 - 本地数据存储
原文:Windows 8 应用开发 - 本地数据存储 在应用中通常会遇到用户主动或被动存储信息的情况,当应用关闭后这些数据仍然会存储在本地设备上,用户下次重新激活应用时会自动加载这些数据.下 ...
- Android之ListView,AsyncTask,GridView,CardView,本地数据存储,SQLite数据库
版权声明:未经博主允许不得转载 补充 补充上一节,使用ListView是用来显示列表项的,使用ListView需要两个xml文件,一个是列表布局,一个是单个列表项的布局.如我们要在要显示系统所有app ...
- cocos2d-html5开发之本地数据存储
做游戏时常常须要的一个功能呢就是数据的保存了,比方游戏最高分.得到的金币数.物品的数量等等.cocos2d-html5使用了html5.所以html5的数据保存方法是对引擎可用的: html5本地数据 ...
- Android本地数据存储: ASimpleCache
一:前言 在上一篇博客Android本地数据存储: Reservoir 博客中,我提到,除了Reservoir库,还可以采用ASimpleCache开源库,来实现本地数据存储.昨天并没有仔细的对比Re ...
随机推荐
- Python中__new__和__init__的区别与联系
__new__ 负责对象的创建而 __init__ 负责对象的初始化. __new__:创建对象时调用,会返回当前对象的一个实例 __init__:创建完对象后调用,对当前对象的一些实例初始化,无返回 ...
- C/C++中回调函数【重要】
参考学习:https://www.cnblogs.com/xuelisheng/p/9339924.html 1. 回调函数定义 回调函数就是一个通过函数指针调用的函数. 如果你把 函数的指针(地址) ...
- v关于使用Glide加载图片失败时显示自己特定的图片
Glide是Android加载图片的一个框架. 常用加载图片到imageView:Glide.with(this).load(url).into(ImageView imageview). 当加载失败 ...
- Java编程实战宝典PDF (中文版带书签)
Java编程实战宝典PDF 目录 第1篇 Java基础知识入门第1章 Java的开发运行环境( 教学视频:57分钟)1.1 Java运行原理与Java虚拟机1.1.1 Java运行原理简述1.1.2 ...
- Fastjson 序列化与反序列化
JSON这个类是fastjson API的入口,主要的功能都通过这个类提供. 序列化API // 将Java对象序列化为JSON字符串,支持各种各种Java基本类型和JavaBean public s ...
- ubuntu下vs code配置c++
链接地址:https://blog.csdn.net/u010648921/article/details/82628616 摘要:Ctrl+Shift+B, F5
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
- MVC4笔记 RedirectResult,RedirectToRoute
RedirectResult:运行重新导向到其他网址,在RedirectResult的内部,基本上还是以Response.Redirect方法响应HTTP 302暂时导向. eg: public Ac ...
- 【Leetcode_easy】1160. Find Words That Can Be Formed by Characters
problem 1160. Find Words That Can Be Formed by Characters solution class Solution { public: int coun ...
- 【ARTS】01_42_左耳听风-201900826~201900901
ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...