sessionstorage

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。 sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。 Web Storage带来的好处： 1、减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。 2、快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。 3、临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

当用户在没有登录的状态下，只能够访问到系统的登录界面，不管输入的路由是什么，都会跳转到登录界面，当用户登录成功后，就会将登录的信息保存到 sessionStorage中，话不多说，直接上代码： 第一步是配置路由：第一个路由是不需要登录就能够进入的路由，第二个是需要登录才能进入的路由 { path: '/Login', name: 'Login', component: Login }, { path: '/BackupWizard', name: 'BackupWizard', component: BackupWizard, meta: { requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的 } } 第二步：在登录界面点击登录按钮时，当用户名和秘密都正确的时候，将登录状态存到sessionStorage，我这里是使用isLogin:true的方式存放到sessionStorage中，并且是在store中进行修改的：代码如下：login.vue文件： this.$store.commit('login',values.userName);this.$router.push({name:'BackupDataView'}); //登录成功后跳转到的页面 store文件： //state中的token的初始值是false，表示未登录login

1. 利用 sessionStorage 进行相对安全的通信（localStorage） 保存数据语法： sessionStorage.setItem("key", "value"); 读取数据语法： var lastname = sessionStorage.getItem("key"); 删除指定键的数据语法： sessionStorage.removeItem("key"); 删除所有数据： sessionStorage.clear(); 2. postMessage 子向父通信 // iframe 页面 发消息 window . parent . postMessage ( { msg : "xxx" } , '*' ) ; // 父页面 收消息 window . addEventListener ( 'message' , function ( res ) { console . log ( res . data . msg ) ; } ) ; 父向子通信 // 父页面 发消息 var myframe = document . getElementById ( 'myframe' ) ; //获取iframe myframe . contentWindow . postMessage ( { data : 'parent' } , childDomain ) ; /

storage封装 1.先简单讲讲storage的基础 cookie遗留问题 ： 1:大小的限制：4KB 不能接受大数据 2:带宽的限制：cookie必须服务器和客户端数据会进行同步， 过时，会去 通知服务器清楚cookie数据 3:如果不加密的传输非常不安全 4:操作是非常复杂，document.cookie进行操作 优点：会根据时间自动清楚数据.时效作用 storage: 1:存储的空间 5MB < storage < 10MB 2:没带宽限制 3:操作简单 4:独立的存储空间但是storage不能替代cookie。 storage的分类 会话级别：sessionStorage 本地存储：localStorage 常用的方法： 设值:setItem(key,value); 取值:getItem(key,value) 删值:removeItem(key); 清除：clear(); 个数:length取键：key(index),获取制定位置的键 index=0 方法封装 export const { localStorage , sessionStorage } = window export class LocalStorage { set ( key , value , time ) { try { const temp = { value , } ; if ( time &&

HTML5 WEB存储中的sessionStorage localStorge作用域 这里的作用域指的是：如何隔离开不同页面之间的localStorage（总不能在百度的页面上能读到腾讯的localStorage吧，哈哈哈）。 localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。 sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。 来源： CSDN 作者： OB1JADI 链接： https://blog.csdn.net/OB1JADI/article/details/104080295

一个网站如何能在客户的浏览器存储更多的数据呢？ 在HTML4的时代在 浏览器端存储点网站个性化的数据，尤其是用户浏览器的痕迹，用户的相关数据等一般只能存储在Cookie中，但是大多数是浏览器对于Cookie的限制也就是逼迫网站存储数据尽量精简，想存储复杂的、关系型的用户数据就不可能了。但是进入HTML5时代，这些就变得不再是问题。。。 下面是cookie的限制： 　　　　1.大多数浏览器支持最大为4096字节的Cookie. 　　　　2.浏览器还限制站点可以在用户计算机上存储的Cookie的数量。大多数浏览器只允许每个站点存储20个Cookie;如果试图存储更多Cookie,则最旧的Cookie便会被丢弃。 　　　　3.有些浏览器还会对它们将接受的来自所有站点的Cookie总数做出绝对限制，通常为300个。 　　　　4.Cookie默认情况都会随着http请求发送到后台服务器，但不是所有请求都需要Cookie的，比如：js、css、图片等请求则不需要cookie。 HTML5支持两种的WebStorage,一种是永久性的本地存储（localStorage）,另一种是会话级别的本地存储（sessionStorage）。 二、会话级别的本地存储：sessionStorage 　　在HTML5中增加了一个Js对象：sessionStorage

四种都是存储数据的方式。 1. localStorage 1. 本地存储 2. 存储容量5M 3. 存储周期：一直存在 4. 不能跨域 2. sessionStorage 1. 本地存储 2. 存储容量5M（各浏览器不同） 3. 存储周期： 页面打开期间；页面关闭，数据消失 4. 不能跨域 3. cookie 1. 本地存储 2. 存储大小4K 3. http请求时会自动携带cookie 4.不能跨域；但是二级域名可以访问一级域名下的cookie 5. 不安全；存储非敏感信息 4. session 1. 服务器端存储 2. 比较安全 3. 基于cookie;存储用户的信息 来源： https://www.cnblogs.com/lyraLee/p/12208134.html

需求 ：有一个项目是微信公众号，属于汽车服务。当车主在填写车主资料或者车辆认证时，需要填写车牌号或者车架号；车牌号需要选择省，为了方便用户操作，所以想自动定位默认省，如下图： 我查询了一些博客，找到了一些方法，经过测试，记录一下还能用的。 方法一：搜狐API 有时候cname这个字段返回的不是省市，因为在2/3/4G网络时，定位失败，但是IP还是可以用的，亦可以配合第二种方法使用。 <!-- 获取用户IP以及位置信息、http&&https兼容--> <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script> <script> // 打印returnCitySN ： {"cip": "222.66.154.186", "cid": "310000", "cname": "上海市"}; console.log(returnCitySN ) let hcityIp = returnCitySN['cip']; let hxreturnCitySN = {cip:hcityIp,cname:returnCitySN['cname']}; sessionStorage['hxreturnCitySN'] =

SessionStorage存储-读取字符串 sessionStorage.setItem("key","value"); sessionStorage.getItem("key"); SessionStorage存储-读取对象 sessionStorage.setItem('user',JSON.stringify(res.data.body.user)); let userInfo=JSON.parse(sessionStorage.getItem('user')); userInfo.userPk 来源： CSDN 作者： 王晓(Java) 链接： https://blog.csdn.net/qq_29229567/article/details/103845586

该文章主要记录在工作中经常使用的小知识点、注意点、遇到的小问题 ios cookie保存用户名保存不进去 原因：因为ios不能保存中文字符的cookie 决方法：使用encodeURI(URIstring)、decodeURI(URIstring)编码解码 mescroll进去之后、ios其他界面就不能滑动了 原因：配置 up 的 isBounce 为 false 之后, 会禁止window的touchmove 事件,从而阻止 iOS 的回弹效果 如果你希望 mescroll之外的某个div 可以滑动,则可为需要滑动的div加入mescroll-touch的样式即可 砍价商城前台 用户进入后一直按返回,最后后台报code used错误 问题：用户第一次进入的是login页面，授权后页面会携带code，当用户一直点击返回，会返回到携带code的页面， 此时code应该是已经被使用过了，所以后台会报 code used 的错误。前台获取到的数据也是错误的。 解决方法： 在进入login页面之前 判断点击的是什么按钮 如果点击的是返回按钮 那就让他退出这个h5页面。 ios中第一次进入链接，链接地址不变 问题：微信分享和支付的时候 需要将地址传给后台 然后执行wxInit，但是在ios的手机中，由于进入网址后，链接地址是不变的， 所以传给后台的地址返回的config的信息不匹配