localstorage | 易学教程

html5中的Web Storage

阅读更多关于 html5中的Web Storage

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。 sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。 sessionStorage的用法数据可以是字符串格式的，也可以是json 1.添加sessionStorage sessionStorage.setItem("key", "value"); 2.获取sessionStorage var value = sessionStorage.getItem("key"); 3.删除sessionStorage sessionStorage.removeItem("key"); 4.清除所有sessionStorage sessionStorage.clear(); 　sessionStorage是每个页面都会有的,不同页面直接更改是不能同步的,这里涉及到跨页面操作,跨页面还是建议用localStorage localStorage会可以将第一次请求的数据直接存储到本地

localstorage实现两个页面通信，购物车原理。

阅读更多关于 localstorage实现两个页面通信，购物车原理。

如：A，B页面，A为商品页，B为购物车页，两个页面同时打开,在A页面点击商品添加至购物车，切换到B页面购物车怎么显示该商品信息利用localStroage，A页面将数据存入localStroage，B页面读取localStorage中的数据关键点: B页面如何知道A页面什么时候存数据到localStorage localStorage中有个‘storage’事件 window.addEventListener(‘storage’, callback)，A页面存数据，B页面监听事 A页面 <button id="add">添加一件商品到购物车</button> <button id="del">删除一件商品从购物车</button> <script type="text/javascript"> window.onload = function () { document.getElementById('add').onclick = function () { count(true) } document.getElementById('del').onclick = function () { count(false) } function count(flag) { let count = localStorage.getItem('count')?JSON.parse

Vue 项目 login 模块

阅读更多关于 Vue 项目 login 模块

登录模块需要做路由的守卫，有些模块是需要被保护的，必须登录才能访问。常见手法是给路由添加 meta：{ auth：true } 来做标识，表示需要做认证。 // 路由守卫 router.beforeEach((to, from, next) => { // 判断要进入的路由是否需要认证 if(to.meta.auth) { // 通过token令牌机制判断是否已经登录 const token = localStorage.getItem('token'); if (token) { next(); // 如果登录则放行，进入路由 } else { // 跳转，并携带重定向地址 next({ path: '/login', query: { redirect: to.path } }); } } else { // 不需要验证的模块，直接放行 next(); } }); 在 Vuex 中存储登录状态 isLogin import Vue from 'vue' import Vuex from 'vuex' import user from './service/user' Vue.use(Vuex); export default new Vuex.Store({ state: { isLogin: localStorage.getItem('token') ? true :

vue 微信授权解决方案

阅读更多关于 vue 微信授权解决方案

背景 vue前后端分离开发微信授权 2018-08-14更新时隔四个月第一次更新，因为项目重构有一次接触到了微信授权，思路已经比原来清晰的多了，将重新修改一下整个文章场景 app将商品分享到微信朋友圈或者分享给微信好友，用户点击页面时进行微信授权登陆，获取用户信息。问题：没有固定的h5应用首页，回调不能到index。授权后重定向url带参数并且很长本人愚钝，开发过程中，尝试过很多方法，踩坑不足以形容我的心情，可以说每一次都是一次跳井的体验啊。 1.一开始尝试的方式是前端请求微信连接，返回code，然后code作为再去请求后台接口获取token，后面看到别人的博客说这个方法不好，最好就是直接请求后台接口，然后后台返回url做跳转，所以就采用了最传统的方法，后台返回url，前台跳转。 2.这个时候就出现一个问题，微信授权要跳跳跳，最终想回到第一次点进来时候的链接就蛋疼了，从网上查了一下解决方法，将链接本身作为redirect_uri参数，大概就是这个样子 https://open.weixin.qq.com/connect/oauth2/authorizeappid=xxxxxxxxxxxxxxxxxx&redirect_uri=*www.admin?http://www.xxx.com/h5/product*&response_type=code&scope=snsapi

纯JS实现KeyboardNav(学习笔记)一

阅读更多关于纯JS实现KeyboardNav(学习笔记)一

纯JS实现KeyboardNav(学习笔记)一这篇博客只是自己的学习笔记,供日后复习所用,没有经过精心排版,也没有按逻辑编写 GitHub项目源码预览地址最终效果 KeyboardNav使用指南: 左下角为网站的icon,'.'代表网站无icon或未设置网站按键盘上相应的按键进入对应网站鼠标放上去可编辑并保存网站,除了初始网站,用户编辑的网站存在本地cookies 清空cookies后保存在本地的网站将被清除,还原会初始状态数据结构的使用哈希,数组做出来导航页面实际上数组就是hash 数组带方括号其实是hash的一种简写. 且数组是对象. 报错学习 JS错误:没有被处理的语法错误 :不期待的字符串] 意思就是这里不应该有字符串] 语法错误 css重要代码 text-transform: uppercase; /*文本小写变大写*/ #mainxxxx{ display: inline-block; } main{ text-align: center; } /*mainxxx这个div居中*/ #mainxxxx>div:nth-child(2){ margin-left: 1em; } #mainxxxx>div:nth-child(2) 代表 mainxxxx 的名为 div 的第二个子元素. 定位 kbd 里面的 button ,并添加 hover kbd

localStorage和sessionStorage

阅读更多关于 localStorage和sessionStorage

一：localStorage：用途：用于长久保存整个网站的数据，保存的数据没有过期时间,直到手动去删除。语法：var storage = window.localStorage; 存值：localStorage.setItem("key","value"); 取值：var saveValue = localStorage.getItem("key"); 删除指定键值：localStorage.removeItem("key"); 清除所有键值：localStorage.clear(); 注意：localStorage在浏览器窗口关闭后还保留数据，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。二： sessionStorage 用途：用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据语法：var storage = window.seesionStorage; 存值：sessionStorage.setItem("key","value"); 取值：var saveValue = seesionStorage.getItem("key"); 删除指定键值：sessionStorage.removeItem("key"); 删除所有键值：sessionStorage.clear(); 注意

前端札记--存储对象

阅读更多关于前端札记--存储对象

关于前端界面中存储：localStorage存储和sessionStorage存储　　相关代码 1 <html> 2 <script> 3 if(!window.localStorage){ 4 alert("浏览器支持localstorage"); 5 }else{ 6 var storage=window.localStorage; 7 var data={ 8 name:'xiecanyong', 9 sex:'man', 10 hobby:'program' 11 }; 12 var d=JSON.stringify(data); 13 storage.setItem("data",d); 14 console.log(storage.data); 15 } 16 var storage=window.localStorage; 17 var data={ 18 name:'xiecanyong', 19 sex:'man', 20 hobby:'program' 21 }; 22 var d=JSON.stringify(data); 23 storage.setItem("data",d); 24 //将JSON字符串转换成为JSON对象输出 25 var json=storage.getItem("data"); 26 var jsonObj=JSON.parse

Hybrid使用localStorage储存数据不靠谱！

阅读更多关于 Hybrid使用localStorage储存数据不靠谱！

在Hybrid做App，需要保存一些数据在本地，一般会使用HTML5的特性localStorage和sessionStorage,具体的介绍请看这里；本文的重点不在于介绍localStorage，而是通过我的遭遇侧重描述为什么HybridApp的数据存储在localStorage不靠谱... 我先来描述一下场景，我是负责用HTML5也就是Hybrid做Ios开发的，在9月底，最近发布了一个新版本后，陆陆续续发现有几个使用ios用户告知的一个现象，说每次使用APP都需要重新登录！用户的描述是，登录以后，当天杀掉进程是不会再使用App是不用重新登录的，但是过几天以后，再使用App就会要重新登录；在定位问题的时候，我通常会要按照以下几个步骤： 1.出现该bug的用户是大面积的群体还是个别几个：群体性：很大可能是代码问题，或者服务器问题，因为使用的是同一个app,同一个服务器接口或者同一个服务器的访问地址；个别几个：很可能与用户的行为，场景有关，在某些特别的时候，就会触发app出现某个bug; 2.出现该bug的用户是否存在类似相似的地方：如果存在相似的地方，那就模仿用户的操作，或者模拟用户的场景，尽量复现问题； 3.出现该问题的逻辑：检查这块逻辑代码，是否存在出现问题的可能，调试与模仿用户的操作；首先，这个“重新登录”的问题不是群发性的因为这几位用户分布在全球，并且这个问题

前端面试题1（HTML篇）

阅读更多关于前端面试题1（HTML篇）

HTML 语义化 HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class 为什么需要语义化：去掉样式后页面呈现清晰的结构盲人使用读屏器更好地阅读搜索引擎更好地理解页面，有利于收录便团队项目的可持续运作及维护简述一下你对HTML语义化的理解？用正确的标签做正确的事情。 html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解 Doctype作用？标准模式与兼容模式各有什么区别? <!DOCTYPE> 声明位于位于HTML 文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。 DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作 HTML5 为什么只需要写 <!DOCTYPE HTML>？ HTML5 不基于 SGML，因此不需要对DTD进行引用

localstorage浏览器储存

阅读更多关于 localstorage浏览器储存

需求 a.html页面生成订单信息，b.html中调用。通过不操作数据库，直接在浏览器自带的数据库中进行操作，当然主要是对Json数据的操作。 a.html代码部分：  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>页面1</title> </head> <body> <table > <tr> <td>编号</td> <td>名称</td> <td>类别</td> <td>借书日</td> <td>还书日</td> <td>金额</td> </tr> <tr> <td id="a">1</td> <td id="b">边城</td> <td id="c">小说</td> <td id="d">2017-3-2</td> <td id="e">2017-3-25</td> <td id="f">20</td> </tr> </table> </body> </html>  <script> /

订阅 localstorage