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

时间: 2019-06-16阅读: 572标签: 存储

问题:

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");
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4220

关闭

js中cookie操作总结:cookie设置,读取,删除,判断是否存在

有时也用其复数形式 Cookies,指某些网站为了辨别用户身份,JavaScript对cookie的相关操作,设置cookie,读取cookie,删除cookie,判断cookie是否存在.......

ES6封装H5本地存储localStorage、sessionStorage

localStorage: 方法存储的数据没有时间限制。sessionStorage: 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

关于网页本地存储的一些思考

localStorage 与 sessionStorage具体适用于什么样的业务场景?如何维护本地储存?如何进行版本控制?碰到禁止本地缓存的情况下怎么解决这个问题?

JS中原始值和引用值的储存方式

在ECMAscript中,变量可以存放两种类型的值,即原始值和引用值。原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。

Token ,Cookie和Session的区别

在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解

本地化存储Storage

Web storage的目的是克服由cookie带来的限制,当数据需要严格控制在客户端上时,无须持续将数据发回服务器。主要是提供一种在cookie之外存储会话数据的途径和提供一种可以大量跨会话存在的数据机制

Web 存储技术

第一个Web存储的技术叫做Cookie,它是网站的身份证。是网站为了辨别用户身份,进行session(服务端的session)跟踪而存储在用户本地终端上的数据,也就是说它是存在电脑硬盘上的,一个很小的txt类型的文件

HTML5新方法:前端存储localStorage的使用总汇

在HTML5中有一个localStorage的新特性,它主要用于本地存储使用,目的是为了解决了cookie存储空间小的问题。本文将讲解:localStorage特点、localStorage的兼容、localStorage的使用等

在前后端分离的项目中,ajax跨域请求怎样附带cookie

后台保存用户信息通常使用的session和cookie结合的方法,而在前端的实际情况中,跨域产生的ajax是无法携带cookie信息的,这样导致了session和cookie的用户信息储存模式受到影响,该怎样去解决这样一个问题呢

H5的sessionStorage和localStorage

H5 新增的 sessionStorage 和 localStorage 的区别:sessionStorage 和 java 的 session 差不多,可以短时间存储信息,电脑浏览器常用sessionStorage 存储用户登录信息,localStorage 可以永久保留用户信息,不用每次都登录,常用于APP

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!