localstorage

Http请求工具 注意，大部分情况下，我们后端返回的数据格式都是类似 { "code" : 0 , "data" : { } , "msg" : "" } 所以我们在请求工具中可以统一检查 code，如果返回正确则只返回 data 中的数据 import axios from 'axios' ; // 创建axios实例 var instance = axios . create ( { timeout : 120000 , headers : { 'X-Requested-With' : 'XMLHttpRequest' } } ) ; axios . defaults . withCredentials = true ; // 添加响应拦截器 axios . interceptors . response . use ( function ( response ) { return response ; } , function ( error ) { // todo 这里可以统一拦截非200状态响应 return Promise . reject ( error ) ; } ) ; /** * 发送 GET 请求，当 code 的值等于期望的值时解析 response.data.data * * 否则拒绝，并传递 data.message 或 data.msg * *

postMessage原理及实现 HTML5为了解决跨域的问题，引入了一个全新的API；跨文档通信API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage是h5新增的方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。 该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。 语法 otherWindow . postMessage ( message , targetOrigin , [ transfer ] ) ; otherWindow：其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。 message 将要发送到其他window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

费用跟踪应用采用了 Wijmo5 和Ionic Framework创建，目的是构建一个hybird app。 我们基于《Mobile first! Wijmo 5 + Ionic Framework之：Hello World！》的环境，将在本教程中完成费用跟踪App的构建。下面的代码结构是本教程完成要达到的效果，请预先创建好文件和目录。 www/ --> 工程根目录 index.html --> app 布局文件 (主HTML文件) css/ --> css 目录 js/ --> javascript 目录 app.js --> 主模块 app.routes.js --> 主路由模块 controllers/ --> app控制器目录 models/ --> app模块目录 services/ --> app 数据Service目录 templates/ --> angularJs视图代码目录(通过UI-Router调用) lib/ --> 第三方类库, 包括Ionic, Wijmo, jQuery等 数据模型（Data Model） 在费用跟踪App中，我们先要创建Data Model，E-R图如下 Category：开支分类 Expense：开支记录 Budget： 预算（下面会用到） 在代码中，我们需要在www/js/services构建AngularJs

手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二：为html添加行为 手把手教你开发Chrome扩展三：关于本地存储数据 HTML5中的localStorage localStorage与cookie类似，它是存储在客户端浏览器中的数据，它与cookie不同的一点是它没有时间限制。localStorage属于html5中的新特性，在 浏览器支持localStorage统计 中，Chrome4+、Firefox3.5+、IE8+、IE7兼容模式、Safari4+、Opera10.5+都是支持localStorage的。以下代码可以用于检测你的浏览器是否支持localStorage： if(window.localStorage){ alert('你的浏览器支持localStorage!'); }else{ alert('浏览器不支持localStorage!'); } localStorage是以key/value方式来进行存储的，并且value只能是字符串形式，如果你要使用其他数据类型，需要进行相应的转换。设置和获取localStorage方法是使用localStorage. key ，或localStorage[ key ]的形式，如： localStorage.myName='walkingp';

前端工程师面试题汇总 本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 HTML • Doctype作用？严格模式与混杂模式如何区分？它们有何意义? 1、声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。 2、严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。 如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。 1)、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式） 2)、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式） 3)、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式） 4)、HTML5 没有 DTD，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法

基本概念 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 数据的生命期

一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 二、localStorage的优势与局限 localStorage的优势 1、localStorage拓展了cookie的4K限制 2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的 localStorage的局限 1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换 3、localStorage在浏览器的隐私模式下面是不可读取的 4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡 5、localStorage不能被爬虫抓取到

最近接到这样的一个需求： 在A页面用户可以在输入框修改内容，在用户还没店家保存按钮时离开A页面跑到B页面，当用户再次返回到A页面时，直接显示用户刚才输入还未保存的内容，几用户不需要再次输入。 前端缓存数据的几种方式： cookie、localStorage、sessionStorage cookie：可以记录前端数据，传到后端，可用于前后端保持会话 localStorage和sessionStorage仅仅是把数据缓存在前端，不用向后端传输。 实现此功能的关键在于找到备份数据、恢复数据、更新数据（或者删除数据）的时机。 备份数据：在用户点击跳转到B页面时备份数据； 恢复数据：A页面加载时从sessionStorage中取出数据，恢复 删除数据：用户退出A页面时删除数据 <script type="text/javascript"> var ud=localStorage.getItem('ud'); var uc=localStorage.getItem('uc'); var un=localStorage.getItem('un'); function initvar() { var edit1=document.getElementById("udate"); var edit2=document.getElementById("ucust"); var edit3

1.设置要全局传的值 localStorage.setItem('mRoleIndex', data.user.roleIndex) 2.在使用的地方获取值 var roleIndex = localStorage.getItem('mRoleIndex') 来源： CSDN 作者： caohongxia666 链接： https://blog.csdn.net/caohongxia666/article/details/104051422

HTTP协议是什么? 超文本传输协议（HyperText Transfer Protocol， 缩写：HTTP）是一种用于分布式、协作式和 超媒体信息系统的 应用层协议。 设计HTTP最初的目的是为了提供一种发布和接收 HTML页面的方法。通过HTTP或者HTTPS协议请求的资源由 统一资源标识符（Uniform Resource Identifiers，URI）来标识。 Http协议是建立在TCP协议基础之上的，当浏览器需要从服务器获取网页数据的时候，会发出一次Http请求。Http会通过TCP建立起一个到服务器的连接通道，当本次请求需要的数据完毕后，Http会立即将TCP连接断开，这个过程是很短的。所以Http连接是一种短连接，是一种无状态的连接。 怎么理解"HTTP是无状态协议"? 无状态协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息. 所谓的无状态，是指浏览器每次向服务器发起请求的时候，不是通过一个连接，而是每次都建立一个新的连接。如果是一个连接的话，服务器进程中就能保持住这个连接并且在内存中记住一些信息状态。而每次请求结束后，连接就关闭，相关的内容就释放了，所以记不住任何状态，成为无状态连接。 无状态协议解决办法： 通过 1、Cookie 2、通过Session 会话保存。 Cookie 在实际业务场景中，会要求用户在页面A进行账号登陆