localstorage

--HTML常见题目 参考链接：https://www.cnblogs.com/king18181753985/p/6510756.html 01、doctype 的作用？严格模式与混杂模式如何区分？它们有何意义？ DOCTYPE是document type (文档类型) 的缩写。 < !DOCTYPE > 声明位于文档的最前面，处于标签之前，它不是html标签。 主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。 严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd 严格模式 ：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面 混杂模式 ：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。 02、HTML5 为什么只需写< !DOCTYPE HTML> ? HTML5不基于 SGML （标准通用标记语言），因此不需要对DTD（ DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。）进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型

问题：在隐身模式、或者用户未启用的情况下，使用localStorage可能会导致浏览器直接报错，怎么办？ 方法：使用try-catch包裹 代码示例： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) let defaultCity = '汉中' try { if (localStorage.city) { defaultCity = localStorage.city } } catch (e) {} export default new Vuex.Store({ state: { city: defaultCity }, mutations: { changeCity (state, city) { state.city = city try { localStorage.city = city } catch (e) {} } }, actions: { changeCity (ctx, city) { // ctx为上下文，city是传来的参数 ctx.commit('changeCity', city) } } }) 来源： https://www.cnblogs.com/VCplus/p/11669655.html

需求： 项目要支持大文件上传功能，经过讨论，初步将文件上传大小控制在20G内，因此自己需要在项目中进行文件上传部分的调整和配置，自己将大小都以20G来进行限制。 PC端全平台支持，要求支持Windows,Mac,Linux 支持所有浏览器。 支持文件批量上传 支持文件夹上传，且要求在服务端保留层级结构。文件夹数量要求支持到10W。 支持大文件断点续传，要求刷新浏览器，重启浏览器，重启电脑后仍然能够继续上传。文件大小要求能够支持到20个G。 支持自动加载本地文件，要求能够自动加载指定的本地文件。 支持文件批量下载，要求不要在服务器打包。因为20G的文件在服务器打包时间比较长。 支持文件夹下载，要求不要在服务器打包，下载到本地后要求保留层级结构 文件列表面板支持路径导航，新建文件夹 一. 大文件上传基础描述： 　　各种WEB框架中，对于浏览器上传文件的请求，都有自己的处理对象负责对Http MultiPart协议内容进行解析，并供开发人员调用请求的表单内容。 比如： Spring 框架中使用类似CommonsMultipartFile对象处理表二进制文件信息。 而.NET 中使用HtmlInputFile/ HttpPostedFile对象处理二进制文件信息。 优点：使用框架内置对象可以很方便的处理来自浏览器的MultiPart二进制信息请求，协议分析操作不用开发人员参与。 缺点

前言 随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现，有一部分原因要归功于浏览器存储技术的提升。cookie存储数据的功能已经很难满足开发所需，逐渐被WebStorage、IndexedDB所取代，本文将介绍这几种存储方式的差异和优缺点。 一、Cookie 1.Cookie的来源 Cookie 的本职工作并非本地存储，而是“维持状态”。 因为HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存，通俗来说，服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，于是就诞生了Cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。 我们可以把Cookie 理解为一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。它可以携带用户信息，当服务器检查 Cookie 的时候，便可以获取到客户端的状态。

HTML 本地存储介绍 最早的 Cookies 自然是大家都知道，问题主要就是太小，大概也就 4KB 的样子，而且 IE6 只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用 cookies 的用户也都慢慢的不存在了，就好像以前禁用 javascript 的用户不存在了一样。 userData 是 IE 的东西，垃圾。现在用的最多的是 Flash 吧，空间是 Cookie 的25倍，基本够用。再之后 Google 推出了 Gears，虽然没有限制，但不爽的地方就是要装额外的插件（没具体研究过）。到了 HTML 5把这些都统一了，官方建议是每个网站 5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的 5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就 5MB 来考虑是比较妥当的。 支持的情况如上图，IE 在 8.0 的时候就支持了，非常出人意料。不过需要注意的是，IE、Firefox 测试的时候需要把文件上传到服务器上（或者 localhost），直接点开本地的 HTML 文件，是不行的。 HTML5 localStorage 操作使用 首先自然是检测浏览器是否支持本地存储。在 HTML5 中，本地存储是一个 window 的属性，包括 localStorage 和

目录 复习 v-once指令 v-cloak指令(了解) 条件指令 v-pre指令(了解) 循环指令 todolist留言板案例 实例成员 - 插值表达式符号(了解) 计算属性 属性监听 组件 局部组件 全局组件 组件交互-父传子 组件交互-子传父 复习 """ vue: 为什么选择vue - 综合其他框架优点，轻量级，中文API，数据驱动，组件化开发，数据的双向绑定，虚拟DO 渐进式js框架 - 选择性控制 - 创建一个vue实例对象，关联一个挂载点 实例成员： el：body，html不能，通常用id，css3选择器语法 data: 数据，字典形式 filters：过滤器函数 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }} methods: 事件方法 指令： 文本：{{ }} | v-text | v-html 事件：v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)" 属性：v-bind:style="myStyle" | :class="[c1, c2]" | :class="{active: isActive}" 表单指令：v-model="变量" """ v-once指令 """ v-once：单独使用，限制的标签内容一旦赋值

复习 """ vue: 为什么选择vue - 综合其他框架优点，轻量级，中文API，数据驱动，组件化开发，数据的双向绑定，虚拟DO 渐进式js框架 - 选择性控制 - 创建一个vue实例对象，关联一个挂载点 实例成员： el：body，html不能，通常用id，css3选择器语法 data: 数据，字典形式 filters：过滤器函数 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }} methods: 事件方法 指令： 文本：{{ }} | v-text | v-html 事件：v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)" 属性：v-bind:style="myStyle" | :class="[c1, c2]" | :class="{active: isActive}" 表单指令：v-model="变量" """ v-once指令 """ v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改) """ <div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值，只可主动更改 --> <input type="text" v-model=

复习 """ vue: 为什么选择vue - 综合其他框架优点，轻量级，中文API，数据驱动，组件化开发，数据的双向绑定，虚拟DO 渐进式js框架 - 选择性控制 - 创建一个vue实例对象，关联一个挂载点 实例成员： el：body，html不能，通常用id，css3选择器语法 data: 数据，字典形式 filters：过滤器函数 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }} methods: 事件方法 指令： 文本：{{ }} | v-text | v-html 事件：v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)" 属性：v-bind:style="myStyle" | :class="[c1, c2]" | :class="{active: isActive}" 表单指令：v-model="变量" """ v-once指令 """ v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改) """ <div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值，只可主动更改 --> <input type="text" v-model=

复习 """ vue: 为什么选择vue - 综合其他框架优点，轻量级，中文API，数据驱动，组件化开发，数据的双向绑定，虚拟DO 渐进式js框架 - 选择性控制 - 创建一个vue实例对象，关联一个挂载点 实例成员： el：body，html不能，通常用id，css3选择器语法 data: 数据，字典形式 filters：过滤器函数 fn(a, b) - {{ a | fn(b) }} | {{ a,b | fn }} methods: 事件方法 指令： 文本：{{ }} | v-text | v-html 事件：v-on:click="clickAction" | @click="clickAction" | @click="clickAction($event)" 属性：v-bind:style="myStyle" | :class="[c1, c2]" | :class="{active: isActive}" 表单指令：v-model="变量" """ v-once指令 """ v-once：单独使用，限制的标签内容一旦赋值，便不可被动更改(如果是输入框，可以主动修改) """ <div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值，只可主动更改 --> <input type="text" v-model=

基本概念 Cookie Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。 localStorage localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。 sessionStorage sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。 三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期