localstorage

版权声明：创作不易，若转载请注明出处 https://blog.csdn.net/qq_41890424/article/details/90478198 cookie 由于http是无状态的协议，一旦客户端和服务器的数据交换完毕，就会断开连接，再次请求，会重新连接，服务器单从网络连接上是没有办法知道用户身份的。cookie就是为了解决此问题而产生的，每次新的用户请求时，便给用户颁发一个独一无二的身份证，下次访问，必须带上身份证，这样服务器就会知道是哪个用户进行了访问，针对不同用户，做出不同的响应 cookie是一个很小的纯文本文件（最多为4K），是浏览器储存在用户的机器上的。储存一些服务器需要的信息，每次请求站点，会发送相应的cookie，这些cookie可以用来辨别用户身份信息等作用。 cookie的属性字段 props intro name cookie的名称 value cookie的值 domain 可以访问cookie的域名 path 可以访问此cookie的页面路径 expires/Max-Age cookie有效的时间 Size cookie的大小 httpOnly js能否读取到cookie信息 secure 是否只能通过https来传递此条cookie cookie是以纯文本的方式存储，即cookie的数据类型为String类型 document .

最近做项目，发现JSON.stringify()使用场景真的挺多，我们都知道 JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串， 而 JSON.parse()可以将JSON字符串转为一个对象。 简单点说，它们的作用是相对的，我用 JSON.stringify()将对象a变成了字符串c，那么我就可以用 JSON.parse()将字符串c还原成对象a。 let arr = [1,2,3]; JSON.stringify(arr);//'[1,2,3]' typeof JSON.stringify(arr);//string let string = '[1,2,3]'; console.log(JSON.parse(string))//[1,2,3] console.log(typeof JSON.parse(string))//object 在使用 JSON.parse() 需要注意一点，由于此方法是将JSON字符串转换成对象，所以 你的字符串必须符合JSON格式，即键值都必须使用双引号包裹 ： let a = '["1","2"]'; let b = "['1','2']"; console.log(JSON.parse(a));// Array [1,2] console.log(JSON.parse(b));// 报错

最近在做一个类似填报信息的页面，一共有8页，当点击切换到下一页的时候要求把上一页的数据存到本地，以便下次切换到这个页面的时候自动把值填上去，并且在最后一页提交数据的时候直接用localstorage里面的数据，类似这样： window.localStorage.setItem('workInfoList', JSON.stringify(workInfoList));// 插入 对象转字符串 var requestworkInfo = JSON.parse(window.localStorage.getItem('workInfoList'));//读取 字符串转换成对象才能使用 然后就了解了一下localstorage的基本用法 一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的

###一、给出结对同学的博客链接、本作业博客的链接、你所Fork的同名仓库的Github项目地址 结对同学的博客链接 本作业博客的链接 Github仓库 ###二、具体分工 - 黄皓： UI 、部分接口 - 张泽宇： AI 、部分接口 三、PSP表格 PSP4.1 Personal Software Process Stages 预估耗时(min) 实际耗时(min) Planning 计划 30 30 Estimate 估计这个任务需要多少时间 10 20 Development 开发 2000 2500 Analysis 需求分析 (包括学习新技术) 800 1000 Design Spec 生成设计文档 60 30 Design Review 设计复审 30 20 Coding Standard 代码规范 (为开发制定合适的规范) 30 20 Design 具体设计 60 60 Coding 具体编码 240 180 Code Review 代码复审 10 120 Test 测试 (自我测试,修改,提交修改) 180 180 Reporting 报告 60 60 Test Report 测试报告 20 20 Size Measurement 计算工作量 10 10 Postmortem & Process Improvement Plan 事后总结 并提出过程改进计划 30

一、给出结对同学的博客链接、本作业博客的链接、你所Fork的同名仓库的Github项目地址 结对同学的博客链接 本作业博客的链接 我所fork的同名仓库的github 二、具体分工 黄皓： UI 、部分接口 张泽宇： AI 、部分接口 三、PSP表格 PSP4.1 Personal Software Process Stages 预估耗时(min) 实际耗时(min) Planning 计划 30 30 Estimate 估计这个任务需要多少时间 10 20 Development 开发 2000 2500 Analysis 需求分析 (包括学习新技术) 800 1000 Design Spec 生成设计文档 60 30 Design Review 设计复审 30 20 Coding Standard 代码规范 (为开发制定合适的规范) 30 20 Design 具体设计 60 60 Coding 具体编码 240 180 Code Review 代码复审 10 120 Test 测试 (自我测试,修改,提交修改) 180 180 Reporting 报告 60 60 Test Report 测试报告 20 20 Size Measurement 计算工作量 10 10 Postmortem & Process Improvement Plan 事后总结 并提出过程改进计划 30

前端工程师 面试 题汇总 本文由我收集总结了一些前端面试题，初学者阅后也要用心钻研其中的原理，重要知识需要系统学习、透彻学习，形成自己的知识链。 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

前端JS面试题总结 你是如何理解原型 和原型链得？ 把所有对象共用得属性放在一个堆内存对象上（共用属性组成得对象），然后让每一个对象得_ propto _ 存储这个【共用属性组成得对象】得地址，而这个公用属性就是原型 原型得出现就是为了 减少不必要得内存消耗 ，而原型链就是对象通过__proto__向当前实例所属类得原型上查找属性或方法得hi之，如果找到 Object 得原型上还是没有找到想要得属性或者方法则查找结束，最终会返回undefined 从输入url地址到页面相应都发生了什么？ 浏览器查找当前 URL 是否缓存，在比对国企时间 DNS 解析URL 对应得 IP 根据 IP 建立 TCP 连接（三次握手） HTTP发起请求。 服务器处理请求，浏览器接收HTTP响应。 渲染页面，构建DOM 树 关闭 TCP连接（四次挥手） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zd6IVbKo-1572240544629)(d:\image\1572176051214.png)] session、cookie、localStorage的区别 相同点 都是保存在浏览器端，而且是同源的 不同点 cookie 数据始终在同源得http 请求中携带，即 cookie 在浏览器 和服务器中 来回传递 而 sessionStorage 和 localStorage

本文转载于: 猿2048 网站➨ HTML5 localStorage本地储存 localStorage是最新的HTML5中的新技术，它主要是用于本地储存。最近看了看localStorage，发现比cookie好多用了，还比cookie简单多了。于是我到这里来和大家分享一下。 介绍 本地储存这东西历史可长了，先是从cookie开始，中途还有什么userdata，flash，Gears，最后到了现在总算找到了我满意的了，那就是localStorage。 来看看其它人对它们的评价： 最早的Cookies自然是大家都知道，问题主要就是太小，大概也就4KB的样子，而且IE6只支持每个域名20个cookies，太少了。优势就是大家都支持，而且支持得还蛮好。很早以前那些禁用cookies的用户也都慢慢的不存在了，就好像以前禁用javascript的用户不存在了一样。userData是IE的东西，垃圾。现在用的最多的是Flash吧，空间是Cookie的25倍，基本够用。再之后Google推出了Gears，虽然没有限制，但不爽的地方就是要装额外的插件（没具体研究过）。到了HTML5把这些都统一了，官方建议是每个网站5MB，非常大了，就存些字符串，足够了。比较诡异的是居然所有支持的浏览器目前都采用的5MB，尽管有一些浏览器可以让用户设置，但对于网页制作者来说，目前的形势就5MB来考虑是比较妥当的。

在浏览器中，我们常见到的存储对象，分别有localStorage，sessionStorage，cookie。这三者同样能在浏览器中存储数据，但是也存在着各自的特点，在不同的场景中运用。 首先是localStorage和sessionStorage，这两者比较相近 通用的API localStorage和sessionStorage有很多通用的API 以localStorage为例 setItem() 该方法传入两个参数，第一个参数表示传进去的值要存储在哪个属性名上，第二个参数表示要传进去的值 如果传入了第一个参数为对象里面原有的属性，那就会覆盖原来的值 当使用该方法传入一个对象时，因为localStorage目前只支持传入字符串，所以传入的内容会变为 "[object Object]" 除了这种方法之外，也可以使用点运算符来设置，当然也可以通过ES6中的方括号的写法来设置 window . localStorage . text = 'content' let t = 'text' window . localStorage [ t ] = 'content' getItem() 该方法传入一个参数，表示要获取的值对应的属性名 removeItem() 该方法传入一个参数，表示要删除的值对应的属性名 clear() clear方法用于清空localStorage对象里面的属性

平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候, 1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击 2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了 为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法,所以我这里就写个vue的方法出来吧 组件里面的html代码: <div class="mtui-cell__ft" @click="getCode"> <button class="mtui-vcode-btn mtui-text-center" v-if="flag">获取短信</button> <button class="mtui-vcode-btn mtui-text-center" v-if="!flag">剩余{{second}}s</button> </div> 重点来啦 在data里面定义几个需要用到的变量: second: 60, flag: true, timer: null //