一、前言 前端部分的搭建，需要考虑使用哪种模式进行页面之间的跳转交互， 而项目内的页面交互，不可避免的需要相互之间的数据共享。 ...，会对加载页面所需时间产生影响 3）浏览器的缓存 在项目发布后如果文件（css/js/image）有更新，需要用户浏览器清理缓存才会从服务器获取更新后的文件， 可以通过文件末尾添加时间戳和版本号来避免浏览器优先使用内部缓存文件这样的问题...）： 只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次 页面跳转：使用js中的append/remove...和page1.htnl.js、page2.html.js等公共文件加载跳转页面前后，js/css/img等公用文件重新加载js/css/img等公用文件只在加载初始页面时加载，更换页面内容前后无需重新加载页面跳转...account="123"&password=123456""，或者localstorage、cookie等存储方式 直接通过参数传递，或者全局变量的方式进行，因为都是在一个页面的脚本环境下 用户体验如果单个页面加载的文件相对较大
2、toDoList 分析 刷新页面不会丢失数据，因此需要用到本地存储 localStorage 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据...，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存 储里面。...核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li 我们可以给链接自定义属性记录当前的索引号 根据这个索引号删除相关的数据----数组的splice(i, 1)方法...删除数据 存储修改后的数据，然后存储给本地存储 重新渲染加载数据列表 因为a是动态创建的，我们使用on方法绑定事件 // 3.toDoList 删除操作 $("ol")... // console.log(data); //保存修改后的数据到本地存储 saveData(data); // 重新渲染页面
的意义，只要转发cookie就能达到目的Cookie在请求一个新的页面的时候都会被发送过去如果需要域名之间跨域共享Cookie，有两种方法：使用Nginx反向代理在一个站点登陆之后，往其他网站写Cookie...LocalStorage的优点：在大小方面，LocalStorage的大小一般为5MB，可以储存更多的信息LocalStorage是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在仅储存在本地..., 'value');// 从 localStorage 获取数据let data = localStorage.getItem('key');// 从 localStorage 删除保存的数据localStorage.removeItem...的使用场景：有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可在网站中的用户浏览信息也会存储在LocalStorage...，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。
浏览器缓存是将文件保存在客户端，在同一个会话过程中会检查缓存的副本是否足够新，在后退网页时，访问过的资源可以从浏览器缓存中拿出使用。...6、no-store 绝对禁止缓存，一看就知道如果用了这个命令当然就是不会进行缓存啦～每次请求资源都要从服务器重新获取。 7、must-revalidate 指定如果页面是过期的，则去服务器进行获取。...但在上面我们提到过，cache-control的优先级更高。 Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。...而移动端由于网速慢，使用localStorage要快于304。 在html中加载一个png图，首次加载的时候时间如下图， ? 然而将图片使用了LocalStorage存储后，再次刷新后加载时间为0。...而相对LocalStorage来说，SessionStorage的数据只存储到特定的会话中，不属于持久化的存储，所以关闭浏览器会清除数据。和localstorage具有相同的方法。
刷新页面不会丢失数据，因此需要用到本地存储 localStorage 2. 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据 3....1.3 案例：toDoList 按下回车把新数据添加到本地存储里面 1.切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。...3.声明一个数组，保存数据。 4.先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。 5.之后把最新从表单获取过来的数据，追加到数组里面。...)方法 5.存储修改后的数据，然后存储给本地存储 6.重新渲染加载数据列表 7.因为a是动态创建的，我们使用on方法绑定事件 1.6 案例：toDoList 正在进行和已完成选项操作 1.当我们点击了小的复选框...4.之后保存数据到本地存储 5.重新渲染加载数据列表 6.load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面 7.如果当前数据的
Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。...from memory cache 字面理解是从内存中，其实也是字面的含义，这个资源是直接从内存中拿到的，不会请求服务器一般已经加载过该资源且缓存在了内存当中，当关闭该页面时，此资源就被内存释放掉了，再次重新打开相同页面时不会出现...from memory cache的情况 from disk cache 是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的...比如轮训api上报数据数据 浏览器缓存很难彻底禁用，大家的做法是加版本号，随机数等方法。 只缓存200响应头的数据，像3XX这类跳转的页面不需要缓存。...兜底数据 在服务器崩溃和网络不可用的时候展示 临时缓存 退出即清理 固定缓存 展示框架这种，可能很长时间不会更新，可用随客户端下发 父子连 页面跳转时有一部分内容不需要重新加载，可用从父菜单带过来 预加载
这样就无法利用渲染队列的缓存来避免回流过于频繁了，所以在使用到DOM元素这些相关的属性时，可以将获取到的属性值存在一个变量中，而不是每次都去重新获取。...当需要使用图片、js/css文件等资源时就不用重新向服务器发出请求，而是可以直接使用LocalStorage中的缓存，这就是LocalStorage缓存的优势； 而Cookie就不一样了，里面存储的数据都是要带到服务器端的...) 其他方法 //该方法接受一个键名作为参数，并把该键名从存储中删除。...用于存储浏览器的会话信息，标签页关闭之后它存储的数据就会被清空，而LocalStorage的数据不会被清空，这是二者的区别： 大小为5~10M左右； 仅在客户端使用，不和服务端进行通信； 接口封装较好；...八、HTTP通用缓存策略 1.缓存的简介 缓存定义： 浏览器在本地磁盘上将用户之前请求的数据存储起来，当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据 缓存的好处： 减少请求的个数
, 'value');// 从 localStorage 获取数据let data = localStorage.getItem('key');// 从 localStorage 删除保存的数据localStorage.removeItem...('key');// 从 localStorage 删除所有保存的数据localStorage.clear();// 获取某个索引的KeylocalStorage.key(index)LocalStorage...的使用场景：有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可在网站中的用户浏览信息也会存储在LocalStorage...一般用在只是客户端向服务器发送信息，而服务器不用向客户端返回什么信息的情况。不会刷新页面。...localStorage:以键值对的方式存储 储存时间没有限制 永久生效 除非自己删除记录sessionStorage：当页面关闭后被清理与其他相比不能同源窗口共享 是会话级别的存储方式cookies
这样，我们就可以安全地从localStorage迁移到Cookie，而不必担心会破坏其他直接访问本地存储的服务或组件。这是一个很好的做法，可以避免将来出现麻烦。...' /** * 管理访问令牌存储和获取，从本地存储中 * * 当前存储实现是使用localStorage....我们将在main.js中初始化ApiService，以确保如果用户刷新页面后，重新设置header，并设置baseURL属性。...UserService： login - 准备请求并通过API服务从API获取令牌 logout - 从浏览器存储中清除用户资料 refresh token - 从API服务获取刷新令牌 如果您注意到了...现在，从API提取更多数据应该很容易-只需在服务内部创建一个新的 .service.js，编写辅助方法并通过我们制作的ApiService访问API。
localStorage 和 sessionStorage Window.localStorage 当页面会话结束的时候，数据将会被清除。...之前一刷新页面，直接被清除，后来发现是浏览器插件引入的js脚本，导致出现问题，在思考，如何验证网页是否被插入js脚本，即，类似于掘金社区的，每次访问都会提示，被插入脚本。...= number; document.write(number); js文件如上，每次刷新页面重新加载的时候，都会从浏览器中读取localStorage.number的内容。...存储api 一些浏览器厂商定义的api 其中有两个方法，为setItem()以及getItem()这两个方法可以设置值，可以获取值。...浏览器会在所有数据可见的页面，触发事件 在对数据进行改变的窗口对象上不会触发该事件 eg；如果两个页面，其中一个页面储存了localStorge，那么另外一个页面也会触发储存的事件。
当需要使用图片、js/css文件等资源时就不用重新向服务器发出请求，而是可以直接使用LocalStorage中的缓存，这就是LocalStorage缓存的优势；而Cookie就不一样了，里面存储的数据都是要带到服务器端的...，标签页关闭之后它存储的数据就会被清空，而LocalStorage的数据不会被清空，这是二者的区别：大小为5~10M左右；仅在客户端使用，不和服务端进行通信；接口封装较好；可对表单信息进行维护；比如添加表单过程中进行了刷新...八、HTTP通用缓存策略1.缓存的简介缓存定义： 浏览器在本地磁盘上将用户之前请求的数据存储起来，当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据缓存的好处：减少请求的个数；节省带宽...当需要使用图片、js/css文件等资源时就不用重新向服务器发出请求，而是可以直接使用LocalStorage中的缓存，这就是LocalStorage缓存的优势；而Cookie就不一样了，里面存储的数据都是要带到服务器端的...八、HTTP通用缓存策略1.缓存的简介缓存定义： 浏览器在本地磁盘上将用户之前请求的数据存储起来，当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据缓存的好处：减少请求的个数；节省带宽
这样就无法利用渲染队列的缓存来避免回流过于频繁了，所以在使用到DOM元素这些相关的属性时，可以将获取到的属性值存在一个变量中，而不是每次都去重新获取。...当需要使用图片、js/css文件等资源时就不用重新向服务器发出请求，而是可以直接使用LocalStorage中的缓存，这就是LocalStorage缓存的优势；而Cookie就不一样了，里面存储的数据都是要带到服务器端的...，标签页关闭之后它存储的数据就会被清空，而LocalStorage的数据不会被清空，这是二者的区别：大小为5~10M左右；仅在客户端使用，不和服务端进行通信；接口封装较好；可对表单信息进行维护；比如添加表单过程中进行了刷新...，可以将刷新前填写的信息写入SessionStorage中，这样即使刷新后数据也不会丢失；还有一种场景：分页的表单在进行前进或后退时，如果将信息保存在SessionStorage中就不会丢失；设置和获取...八、HTTP通用缓存策略1.缓存的简介缓存定义： 浏览器在本地磁盘上将用户之前请求的数据存储起来，当访问者再次需要改数据的时候无需再次发送请求，直接从浏览器本地获取数据缓存的好处：减少请求的个数；节省带宽
编写这个案例步骤大致如下： 编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表 那么提交评论信息表单可以写为一个子组件，而评论信息列表为父组件 给提交评论信息表单将子组件的评论内容传递到父组件评论信息列表...同时，需要写一个存储以及刷新评论信息列表的方法，在子组件提交评论信息之后，子组件还要调用父组件的这个刷新方法。...5.设置提交按钮的click事件，打印评论数据 ? 在浏览器查看一下打印出来的数据，如下： ? 已经可以获取到数据了，下面将其进行存储。...6.将获取的user和comment存储到localStorage中 ? 打开浏览器，查看存储的数据，如下： ? 7.存储评论内容数据完毕后，清空输入框 ? 好了，这时候已经设置添加好评论内容的数据。...在浏览器点击提交按钮，查看是否触发父组件的reload_list方法，如下： ? 好了，到这里可以执行父组件的刷新列表方法了，那么下面只要完善刷新列表的方法，对数据进行刷新即可。
编写这个案例步骤大致如下： 编写一个基本的样式页面，页面内容有两部分：提交评论信息表单、展示评论信息的列表 那么「提交评论信息表单」可以写为一个子组件，而「评论信息列表」为父组件 给「提交评论信息表单」...将子组件的评论内容传递到父组件「评论信息列表」 同时，需要写一个存储以及刷新评论信息列表的方法，在子组件提交评论信息之后，子组件还要调用父组件的这个刷新方法。...4.使用v-mode设置评论者以及评论内容 5.设置提交按钮的click事件，打印评论数据 在浏览器查看一下打印出来的数据，如下： 已经可以获取到数据了，下面将其进行存储。...6.将获取的user和comment存储到localStorage中 打开浏览器，查看存储的数据，如下： 7.存储评论内容数据完毕后，清空输入框 好了，这时候已经设置添加好评论内容的数据。...8.在父组件编写刷新列表的方法reload_list()，提供子组件进行调用 在浏览器点击提交按钮，查看是否触发父组件的reload_list方法，如下： 好了，到这里可以执行父组件的刷新列表方法了
缓存命中率高意味着有很高的比率数据是从缓存中获取到数据的。 在HTTP请求和响应的消息报头中，常见的与缓存有关的消息报头有： ?...这样开发者在更新数据后，可以使用“刷新缓存”功能来强制CDN节点上的数据缓存过期，保证客户端在访问时，拉取到最新的数据。...，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。...在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面...，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
服务器端的存储介质大体上分为4种： cache:缓存，它可以让从数据库、磁盘上输出的东西/数据放置在缓存里，从而减少数据库或是磁盘的读取与写入（IO）操作； 磁盘文件：如，我们常常会将图片、视频等文件存放在磁盘上...需要在浏览器关闭或是重新打开页面，才会消失； 本地存储可以存储什么？...localStorage；（IOS浏览器在无痕模式浏览下，是无法打开localStorage；以及，其他奇葩浏览器，在存储localstorage的时候报错） 做法：根据前面代码，我们在检查是否支持，先进行...注意：更改完，第一次是不生效的，只有第二次刷新才会生效； 如果有一个文件要更新，你就要去更新manifest,而更新manifest文件，它会把server上的文件全部重新拉取一次，而非只是拉取你需要更改的那个文件...文件的更新，文件更新后是需要页面再次刷新的，并且在第2次刷新才能获取新资源； 更新是全局性的，无法单独更新某个文件； 对于链接的参数变化的敏感的，任何一个参数的修改都会被重新缓存，例如：index.html
缓存命中率高意味着有很高的比率数据是从缓存中获取到数据的。...这样开发者在更新数据后，可以使用“刷新缓存”功能来强制CDN节点上的数据缓存过期，保证客户端在访问时，拉取到最新的数据。...，那么必须更新manifest文件之后这些资源才能被浏览器重新下载，如果只是更新了资源而没有更新manifest文件的话，浏览器并不会重新下载资源，也就是说还是使用原来离线存储的资源。...在更新了资源之后，新的资源需要到下次再打开app才会生效，如果需要资源马上就能生效，那么可以使用window.applicationCache.swapCache()方法来使之生效，出现这种现象的原因是浏览器会先使用离线资源加载页面...，然后再去检查manifest是否有更新，所以需要到下次打开页面才能生效。
MPA 多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css 等相关资源。多页应用跳转，需要整页资源刷新。...==推荐在 created 钩子函数中调用异步请求==，因为在 created 钩子函数中调用异步请求有以下优点：能更快获取到服务端数据，减少页面加载时间，用户体验更好；SSR 不支持 beforeMount...Vuex 和 localStorage 的区别最重要的区别vuex 存储在内存中localstorage 则以文件的方式存储在本地，只能存储字符串类型的数据，存储对象需要 JSON 的stringify...vuex 用于组件之间的传值。localstorage 是本地存储，是将数据存储到浏览器的方法，一般是在跨页面传递数据时使用 。...Vuex 能做到数据的响应式，localstorage 不能永久性刷新页面时vuex 存储的值会丢失，localstorage 不会。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
