localstorage

　　为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等 (1)语义标签 　　 语义化标签使得页面的内容结构化，见名知义 标签 描述 <hrader></header> 定义了文档的头部区域 <footer></footer> 定义了文档的尾部区域 <nav></nav> 定义文档的导航 <section></section> 定义文档中的节（section、区段） <article></article> 定义页面独立的内容区域 <aside></aside> 定义页面的侧边栏内容 <detailes></detailes> 用于描述文档或文档某个部分的细节 <summary></summary> 标签包含 details 元素的标题 <dialog></dialog> 定义对话框，比如提示框 (2)增强型表单 　　 HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。 输入类型 描述 color 主要用于选取颜色 date 从一个日期选择器选择一个日期 datetime 选择一个日期（UTC 时间） datetime-local 选择一个日期和时间 (无时区) email 包含 e-mail

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者等。 语义标签 　语义化标签使得页面的内容结构化，见名知义 标签 描述 <hrader></header> 定义了文档的头部区域 <footer></footer> 定义了文档的尾部区域 <nav></nav> 定义文档的导航 <section></section> 定义文档中的节（section、区段） <article></article> 定义页面独立的内容区域 <aside></aside> 定义页面的侧边栏内容 <detailes></detailes> 用于描述文档或文档某个部分的细节 <summary></summary> 标签包含 details 元素的标题 <dialog></dialog> 定义对话框，比如提示框 增强型表单 HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。 输入类型 描述 color 主要用于选取颜色 date 从一个日期选择器选择一个日期 datetime 选择一个日期（UTC 时间） datetime-local 选择一个日期和时间 (无时区) email 包含 e-mail 地址的输入域 month

客户端存储数据的两个对象为： localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均 只能存储字符串类型的对象 （虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。 localStorage生命周期是 永久 ，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为 当前窗口或标签页 ，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。 不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。 localStorage和sessionStorage使用相同的API: localStorage.setItem("key","value");//以“key”为名称存储一个值“value” localStorage.getItem("key");//获取名称为

localStorage、sessionStorage是Html5的特性,IE7以下浏览器不支持 localStorage和sessionStorage的区别： (1)localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 (2)他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。 (3)localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了 (4)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。 localStorage、和sessionStorage的用法: localStorage和sessionStorage使用时

http://todolist.cn/ App.vue <template> <div> <div>大家好，我叫技术高超</div> <div>大家好，我叫{{name}}</div> <input type="text" v-model="name"> <hr> <input type="text" v-model="todo" @keyup="keyupClick($event)"> <button @click="addData()">添加</button> <h2>正在进行中</h2> <ul> <li v-for="(item,index) in list" :key="index" v-if="!item.checked"> <input type="checkbox" v-model="item.checked" @change="changeList()"> {{item.title}} <button @click="deleteData(key)">删除</button> </li> </ul> <h2>已经完成</h2> <ul class="finished"> <li v-for="(item,key) of list" :key="key" v-if="item.checked"> <input type="checkbox" v-model="item

Doctype作用？标准模式与兼容模式各有什么区别? （1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。（2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 HTML5 为什么只需要写 ？ HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。 （1）行内元素有：a b span img input select strong（强调的语气） （2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）常见的空元素： 鲜为人知的是：

前言 随着Web应用程序出现以来，人们对与能够直接在客户端上存储信息能力的要求始终没有停止过。应用开发人员在找各种方式将数据存储在客户端上。从刚开始的Cookie存储方案，到现在的Web Storage和indexedDB，本文将主要介绍这三种浏览器存储方式优缺点。 Cookie 1、Cookie是什么？ HTTP Cookie ，通常直接叫做 cookie ，起初是在客户端用于存储会话信息的。该标准要求服务器对 任意 HTTP 请求发送 Set-Cookie 而 HTTP 头作为响应的一部分，其中包含会话信息。例如，这种服务器响 应的头可能如下： HTTP/1.1 200 OK Content-type: text/html Set-Cookie: name=value Other-header: other-header-value 这个 HTTP 响应设置以 name 为名称、以 value 为值的一个 cookie ，名称和值在传送时都必须是 URL 编码的。浏览器会存储这样的会话信息，并在这之后，通过为每个请求添加 Cookie , HTTP 头将信 息发送回服务器，如下所示： GET /index.html HTTP/1.1 Cookie: name=value Other-header: other-header-value

　　近期做项目的过程中，使用vuex保存页面公共数据，测试无网情况后又接通网络的情况下，页面进行重新加载。遇到一个小bug——发现在苹果手机IOS系统下，页面刷新重新加载后页面中通过vuex存储并显示的数据丢失了。 　　下面先介绍一下 产生 这种情况 的原因 ： js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。 刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。 要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。 　　 　　接着我们介绍两种 解决 上述问题 的方案 ： 一、借用客户端本地存储方案localStorage 　　具体实现描述： 在对state数据进行初始化时，从localStorage中取出对应的值。 在mutations中添加将相应数据存储至localStorage中的操作。 　　代码如下： state: { // 初始化时从localStorage中取值，没有初始值时置为空数组 pmh: localStorage.getItem('pmh')||[] }, mutations: { SET_PMH: (state, pmh) => { state.pmh = pmh //

1、什么是localstorage localStorage是HTML5提供的在客户端存储数据的新方法之一，主要用于长久保持整个网站的数据，保持的数据没有过期时间，直到手动删除，存储形式一般为key/value对的数据，另一种是sessionStorage。 localStorage实现数据存储没有时间限制，sessionStorage针对一个session实现数据存储且有时间限制，其默认的时间有效期为浏览器的会话时间。之前客户端的数据存储由cookie实现，但cookie不适合大量数据存储，其存储量最大为4K，localStorage一般浏览器支持5M的存储量。 2、localStorage的优点 localStorage拓展了cookie的存储量，由原来的4K拓展到现在的5M。 localStorage将第一次请求的数据直接存储到本地，相当于支持一个5M大小的针对于前端页面的数据库，可节约带宽。 localStorage中的内容不能被爬虫抓取到，有一定的安全性。 3、localStorage的缺点 localStorage针对不同的浏览器版本存储量不统一，并且只支持IE8以上的IE版本。 localStorage的值类型限定为string类型，因此在使用localStorage存储数据时需进行相关的数据转换方法，对于常见的JSON对象类型常用的方法为JSON.stringify

一，cookie的使用 1.需要先下载模块 npm i js-cookie -S 2.在使用cookie的页面上引入模块 import Cookies from 'js-cookie' 3.使用方法 创建一个在整个网站上有效的Cookie Cookies.set('name', 'value'); 读取cookie： Cookies.get('name'); // => 'value' 删除cookie： Cookies.remove('name'); 二，localStorage的使用 1，储存 localStorage.setItem('userName','HelloWeen'); 2，获取 localStorage.getItem('userName') 3，删除 localStorage.removeItem('userName'); 三，sessionStorage的使用 存储数据 sessionStorage.setItem('testKey','这是一个测试的value值'); // 存入一个值 读取数据 sessionStorage.getItem('testKey'); // => 返回testKey对应的值 参考内容： https://blog.csdn.net/mf_717714/article/details/84233625 来源： CSDN 作者： 鄧