sessionstorage

cookies,sessionStorage 和 localStorage 的区别

情到浓时终转凉″ 提交于 2019-12-06 21:27:36
cookies,sessionStorage 和 localStorage 的区别? sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 因此 sessionStorage 不是一种持久化的本地存储,仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是 永远不会过期的。 web storage 和 cookie 的区别 Web Storage 的概念和 cookie 相似,区别是它是为了更大容量存储设计的。Cookie 的大小是受限的,并且每次你请求一个新的页面的时候 Cookie 都 会被发送过去,这样无形中浪费了带宽,另外 cookie 还需要指定作用域,不可以跨域调用。 除此之外,Web Storage 拥有 setItem,getItem,removeItem,clear 等方法,不像 cookie需要前端开发者自己封装 setCookie,getCookie。但是 Cookie 也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP 规范的一部分而存在 ,而 Web Storage 仅仅是为了在本地存储数据而生。 来源: https://www.cnblogs.com/zienlove/p/11997840

Duplicate Tab copying sessionStorage in Chrome

北城余情 提交于 2019-12-06 18:54:45
问题 When a tab is duplicated in Chrome, is sessionStorage also duplicated? I noticed that in IE it is not. 回答1: In Chrome, Yes. And you've hit on an important distinction. The contents of sessionStorage is "copied" not "shared". Any changes made to sessionStorage after the tab is duplicated are not reflected in the other tab's sessionStorage . 回答2: Yes, if you duplicate the tab, the sessionStorage data is also duplicated on the copied tab. 来源: https://stackoverflow.com/questions/21463696

sessionStorage缓存数据

纵饮孤独 提交于 2019-12-06 18:26:30
sessionStorage缓存数据 方法 存储数据: sessionStorage.setItem('key','value') 获取数据: sessionStorage.getItem('key') 清除某项: sessionStorage.removeItem('key') 清除所有: sessionStorage.clear() 一般 sessionStorage.setItem('name','Lee') sessionStorage.getItem('name') 存储对象 let setInfo = JSON.stringify(formData) sessionStorage.setItem('objInfo', setInfo) let getInfo = JSON.parse(sessionStorage.getItem('objInfo')) 来源: https://www.cnblogs.com/mahmud/p/11996948.html

JS基础 sessionStorage

£可爱£侵袭症+ 提交于 2019-12-06 13:55:51
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。 而 localStorage 用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。 这边主要说明 sessionStorage 的用法 数据可以是字符串格式的,也可以是json 添加 sessionStorage window.sessionStorage.setItem("key", "value"); 获取 sessionStorage var value = sessionStorage.getItem("key"); 删除 sessionStorage window.sessionStorage.removeItem("key"); 清除所有 sessionStorage window.sessionStorage.clear(); 来源: https://www.cnblogs.com/ajaemp/p/11987936.html

20道HTML基础面试题(附答案)

醉酒当歌 提交于 2019-12-06 12:35:26
以下是我整理的一些HTML的基础面试体,并自己整理了答案。 1 DOCTYPE有什么作用?标准模式与混杂模式如何区分?它们有何意义? 告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 标准模式(Standards mode)以浏览器支持的最高标准运行;混杂模式(Quirks mode)中页面是一种比较宽松的向后兼容的方式显示。 2 HTML5为什么只需要写 <!DOCTYPE HTML>? HTML5不基于SGML(Standard Generalized Markup Language 标准通用标记语言),因此不需要对DTD(DTD 文档类型定义)进行引用,但是需要DOCTYPE来规范浏览器行为。 HTML4.01基于SGML,所以需要引用DTD。才能告知浏览器文档所使用的文档类型,如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 3 行内元素有哪些?块级元素有哪些? 空(void)元素有那些? 行内元素: a span img input select 块级元素: div ul ol li dl dt dd h1 p 空元素: <br> <hr> <link> <meta>

vuex 联动 sessionStorage 对数据持续存储

99封情书 提交于 2019-12-06 10:06:59
vuex 联动 sessionStorage 对数据进行持续存储,防止用户手动刷新页面导致vuex数据丢失,页面出错问题 1. 该方法利用vuex的plugins属性实现,直接放代码,( sessionStorage.setItem 可以把数据加密下,取值的时候也需要解密) 1 const sessionStoragePlugin = store => { 2 store.subscribe((mutation, state) => { 3 Object.keys(state).forEach((item, index) => { 4 // sessionStorage.setItem 可以把数据加密下,取值的时候也需要解密 5 window.sessionStorage.setItem(item, JSON.stringify(state[item])) 6 }) 7 }) 8 } 9 10 export default sessionStoragePlugin 2. 状态初始化 1 let vuxdata = null 2 try { 3 // 如果session加密了这里取值需要解密 4 vuxdata = JSON.parse(sessionStorage.getItem('vuxdata')) || {} 5 } catch (error) { 6 vuxdata = {

VUE-02

限于喜欢 提交于 2019-12-06 05:41:30
VUE - 02 VUE使用: 1. html 引入vue 2. new Vue({el: '#app'}) # 挂载点 3. 成员 data,methods:{} 4. 内容指令 -- 插值表达式 {{ 变量表达式 }} -- 过滤器 {{ 变量表达式 | 过滤器 }} {{ a,b | f(c,d) | f1 }} Vue.filter('f',function(a,b,c,d){return a+b}) -- 文本指令 v-text='变量' v-html= '变量' v-once='变量' 只是原始值 5. 属性指令 v-bind:style='变量' 简写: :class='变量' {c1: x1} x1为true或false,表示c1是否存在 [c1,c2 ] 表示双类名 6. 事件指令 v-on:click='方法' 简写: @mouseover = '方法($event,$data)' 7. 表单指令: v-model='变量' (单选框: 复选框 选中非选中) 8. 条件指令: v-if | v-show | v-if v-else-if v-else -- options - 成员获取 # 直接拿不到的成员,使用options去拿 new Vue({ el: '#app', data:{ msg:'数据' }, methods:{ btnClick(){

HTML5 从基础学习之二 --Canvas Geolocation Cache

六眼飞鱼酱① 提交于 2019-12-06 03:36:43
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1 、 Canvas 元素的创建(规定元素的 id ,宽度和高度) <canvas id="myCanvas" width="200" height="100"></canvas> 2 、 JavaScript 绘制: <script type="text/javascript"> var c = document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#ff0000"; cxt.fillRect(0,0,150,75); </sctipt> 这段代码必须要写在 <body> 标签中才可以。 通过 document 来获取对象 Canvas 通过 Canvas.getContext ()获取上下文 cxt 是内建的 HTML5 对象,拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法 cxt.fillStyle="#ff0000";// 设置填充颜色 RGB cxt.fillRect(0,0,150,75);// 设置填充区域 左上右下( 0 , 0 ) 用于描绘一个已知左上角顶点位置以及宽和高的矩形,描绘完成后 Context

说一下几种常用的前端缓存

偶尔善良 提交于 2019-12-06 03:07:41
1.Cookie cookie是比较老的前端缓存技术了,它的特点是想要使用它前端必须要有服务(静态网页是不行的),而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢?因为只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送,而且由于浏览器的跨域限制,客户端和服务端必须要保证同源的原则(也就是跨域问题,详情见我的其他文章),由于cookie是存放在前端的,所以安全问题一直是个大问题,因此一般重要的信息不建议放在cookie中存放。 2.Session 对于服务端的程序眼来说session大家肯定很熟悉了,session是一种服务端的机制,也就是能把信息存放在服务端,所以安全可以保障,它的原理是通过session id来识别客户端,这个session id是存放在cookie中的(当然session id让用户看见没无妨),服务端会通过session id来识别客户端进行匹配和判断。它和cookie对比起来差距就很明显了,一个是把数据存在客户端;一个存在服务端,从安全性考虑的话一般像用户名密码这种私密信息一般放在session中。 3.localStorage 它的特点就是“持久”,一旦通过保存,不通过手动清除的话,就会一直保存在前端,它的保存格式是键值对的方式也就是“key-value”的方式保存的,它的存储空间大小限制在500万字符左右

How to deal with sessionStorage locally in FF (for testing)

别说谁变了你拦得住时间么 提交于 2019-12-06 02:54:31
I'm trying to write tests for all my JS, and the tests (I'm using Jasmine) are run locally in the browser. Due to security restraints(?) sessionStorage does not work locally (viewing file:///... in the browser) in Firefox. Quick example: window.sessionStorage.setItem('foo', 'bar'); This gives "Error: Operation is not supported". I tried overriding window.sessionStorage with my own mock methods, but with no luck. The only solution I have at the moment is to put everything related to sessionStorage inside a try/catch block. Any suggestions for how to best handle this issue? Object.defineProperty