localstorage | 易学教程

HTML5 localStorage本地存储实际应用举例

阅读更多关于 HTML5 localStorage本地存储实际应用举例

HTML5 localStorage本地存储实际应用举例 by zhangxinxu from http://www.zhangxinxu.com 本文地址： http://www.zhangxinxu.com/wordpress/?p=1952 一、引言 HTML5虽未来到其鼎盛时期，但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性。就我所做的项目而言，应用的HTML5相关特性有： data- 自定义属性、 placeholder 、以及 email 类型input文本框。上周新上线的会员中心，自己又应用了HTML5相关内容——HTML5 localStorage本地存储，这里简单分享下，希望能触动一下大家的小小神经。二、实例展示实际在线的页面访问，如果不是会员，还需要注册。烦那！所以自己就把其高保真独立出来，做了个HTML版本的demo页面。您可以狠狠地点击这里： HTML5 localstorage本地存储应用demo 进入demo页面，您可以看到左侧一个高高的（如果你是首次进入）的垂直菜单栏，长相如下：点击次级标题栏（灰色渐变的标题栏）会有展开收起的动作。例如点击首页标题栏“订单中心”，对应列表项收起，然后你刷新页面，该列表项依旧处于收起状态。如下图：三、实现探究有意思！怎么玩的呢？这里卖个关子，先看看京东商城的做法。

vue真实项目开发从0到1

阅读更多关于 vue真实项目开发从0到1

项目环境 node : 12.10.0 npm : 6.10.3 vue-cli : 2.x 1、使用normalize.css统一浏览器标签样式 npm i -S normalize.css main.js中引用： import 'normalize.css' 2、使用reset-css重置默认样式 npm i -S reset-css main.js中引用： import 'reset-css' 3、引入iconfont图标库这里我将阿里图标库放入到static/font目录下 main.js中引入： import '../static/font/iconfont.css' 即可在vue中通过class="iconfont iconxxx"进行使用 4、使用vue-cookies管理cookies npm i vue-cookies -S main.js中 import vueCookies from 'vue-cookies'; Vue.use(vueCookies ); 5、使用vue-router（cli已引入） router目录下我的结构如下： index.js // 路由入口文件 map // 路由 hooks // 路由钩子函数，用来鉴权 // index.js 路由入口文件，用于挂载路由和钩子 import Vue from 'vue'; import

HTML5 本地缓存 - 乐木的博客

阅读更多关于 HTML5 本地缓存 - 乐木的博客

Cookie 经过HTTP请求服务器返回小量信息存放在客户端 session 信息存放在服务器，在一定时间内（默认30分钟）有效，过了期限自动销毁 localStorage 大量数据永久存放在客户端（无需经过服务器） sessionStorage 大量数据存放在客户端，当前页面或当前页面的内部页面关闭时自动销毁优点 Cookie=》极高的扩展性和可用性； localStorage / sessionStorage =》 1.存放大小4M，2.仅仅保存在客户端，3.接口易于封装缺点 Cookie=》1.需HTTP请求 2.存储量小； localStorage / sessionStorage =》 1.仅能保存为字符串，不便于存储复杂数据类型应用场景 Cookie：考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。 localStorage ：来保存用户在电商网站的购物车信息，HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的； sessionStorage：一些内容特别多的表单，为了优化用户体验

HTML5 本地缓存 - 乐木的博客

阅读更多关于 HTML5 本地缓存 - 乐木的博客

【面试】HTTP协议

阅读更多关于【面试】HTTP协议

浏览器输入url按回车后经历了什么？ 1.首先，解析url，检测url地址是否合法； 2.浏览器先查看浏览器缓存--系统缓存--路由器缓存，如果缓存中有，则直接显示页面内容，如果没有，则执行第三步；【浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；】【操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录；】【路由器缓存：如果上述两个步骤均不能成功获取DNS记录，则继续搜索路由器缓存；】【ISP缓存：若上述均失败，继续向ISP搜索；】３.在发送HTTP请求前，需要域名解析（DNS解析），获取相应的IP地址；４.浏览器向服务器发起ｔｃｐ连接，与浏览器建立ｔｃｐ三次握手；５.握手成功后，浏览器向服务器发送HTTP请求，发送数据包；６.服务器处理收到的请求，将数据返回至浏览器；７.浏览器收到HTTP响应；８.浏览器解码响应，如果响应可以缓存，则存入缓存；９.浏览器发送请求获取嵌入在HTML中的资源（ｈｔｍｌ，ｃｓｓ，ｊｓ，图片，音乐．．．），对于未知资源，会弹出对话框；１０.浏览器发送异步请求；１１.页面全部渲染完毕； Http协议中有哪些请求方式？ Get：用于请求访问已经被URI（统一资源标识符）识别的资源，可以通过URL传参给服务器； Post：用于传输信息给服务器，主要功能与Get类似

Session、LocalStorage、Cache-Control

阅读更多关于 Session、LocalStorage、Cache-Control

本次主要介绍一些 Session 、 LocalStroage 、 Cache-Control 相关知识并与上篇博客 Cookie 做一些对比说明。一、 Session 1、什么是 Session 说到 Session 一定要介绍一下 Cookie ， Cookie 是如何生成的：服务器通过 HTTP 相应头的 Set-Cookie 给客户端一段字符串，客户端每次访问相同域名的网页时都会自动带上这段 Cookie 值并且，这段 Cookie 值会在客户端保存一定的时间 Cookie 的大小一般为 4KB Cookie 的默认失效时间为用户关闭浏览器就失效了，但是服务器端可以 Cookie 的失效时间 Cookie 的本质其实就是 HTTP 请求的响应头的一部分。介绍下 Session ： Session 的出现出于对 Cookie 信息的安全性处理，如果 Cookie 值带上的用户的邮箱、账号、余额等隐私信息，那么在 Web 端是很容易被盗用或者篡改，此时 Session 出现， Session 是服务器端存在内存中的一段 hash 值，并且是通过随机数随机生成的，这个随机数对应的是某一个用户的用户信息，那么每次在客户端发起请求带来的 Session 值，就可以在服务端根据此值去找到对应的用户信息数据。具体的流程如下：将 SessionId(随机数) 通过 Cookie

面试1

阅读更多关于面试1

1.什么是盒模型，如何在css中告诉浏览器使用不同的盒模型来渲染你的布局？ css中所有的html元素都可以看成一个盒模型，一个盒模型包括margin,border,padding,content 盒模型分为两类：W3C标准盒子模型和IE盒子模型　编写代码尽量使用标准的W3C盒子模型 <!DOCTYPE html>用来声明，放在页面开头标准盒模型：总宽/高度=我们设置的宽/高度+padding+border IE盒模型：（怪异盒模型）总宽/高度=我们设置的宽/高度在CSS3中通过设置box-sizing的属性来完成标准或者怪异模式的切换： box-sizing: content-box 采用标准模式，是默认样式 box-sizing: border-box 采用怪异模式 2.请描述cookies,sessionStorage和localStorage的区别？　　1》数据存储大小不同。　　　　cookies:数据始终在同源的http请求中携带，即cookie能在服务器和浏览器之间回传。故存储的数据的大小，一般为4096B。　　　　sessionStorage:数据保存在本地，不会自动发给服务器。所以一般为5M或者更大。　　　　localStorage:数据保存在本地，不会自动发给服务器。所以一般为5M或者更大。　　2》数据有效期不同。　　　　cookies

【疑难杂症】 Android WebView 无法打开天猫页面

阅读更多关于【疑难杂症】 Android WebView 无法打开天猫页面

欢迎转载，但请务必注明出处！ http://ryanhoo.github.io/blog/2014/09/17/android-webview-setdomstorageenabled Android WebView 突然无法打开天猫的详情页，一直停留在加载状态。而在此之前，应用里是完全可以正常访问的，通过搜索，找到解决方法，简单设置一行代码 webView.getSettings().setDomStorageEnabled(true) 即可解决问题，但背后的原因又是什么呢？我们不能只是做解决问题的程序员，还要做好奇的程序员，跟我来一探究竟吧。定位问题本着发现问题 -> 分析问题 -> 解决问题的步骤，接下来我们要定位问题的来源。 Chrome Inspcet Device 我首先想到的是，Android 4.4 以后的 WebView 是基于 chromium 内核的，这带来了一个福利是，我们可以在 chrome 中 inspect device，像普通网页一样，进行 debug，精准、快速定位问题来源。正好我手头有 Nexus 5 刷的是 Android L Preview 还有 Mi3 是最新的 MIUI V6 ，打开 Chrome， Tools -> Inspect Devices ，就可以看到原生应用里的 WebView 页面了。点击 inspect

关于JSON.stringify()与JSON.parse()

阅读更多关于关于JSON.stringify()与JSON.parse()

一、JSON.stringify()与JSON.parse()的区别　　JSON.stringify()的作用是将js值转换成JSON字符串，而JSON.parse()是将JSON字符串转换成一个对象。也就是说，如果我们用JSON.stringify()将一个对象变成了字符串，那么使用JSON.parse()将字符串还原成对象。 let obj = { name:"song", age:10 }; let changeObj =JSON.stringify(obj); console.log(changeObj); //"{"name":"song","age":10}" console.log(typeof changeObj);//string let orig =JSON.parse(changeObj); console.log(orig);//{name:"song",age:10} console.log(typeof orig);//object 　　　　二、JSON.stringify()和JSON.parse()的几种用法（一）在localStorage/sessionStorage里存储对象/数组/对象数组　　　 localStorage/sessionStorage默认只能存储字符串，如果要存储对象类型的数据，在存入的时候利用JSON

localstorage使用方法

阅读更多关于 localstorage使用方法

localstorage使用方法现在前端做数据存储，跨页面传值，localStorage是一个很好的方式，以键值对的方式存储，也方便取值赋值，下面说一说使用方法和一些常见的使用技巧。 1.存值共有3种方式，localStorage相当于window对象下面的一个属性，所以有[]和.调用，但也具有自身的setItem方法 // 自身方法 localStorage.setItem("name","bonly"); // []方法 localStorage["name"]="bonly"; // .方法 localStorage.name="bonly"; 2.取值也是如此，自身的方法是getItem // 自身方法 localStorage.getItem("name"); // []方法 localStorage["name"]; // .方法 localStorage.name; 3.改变的方式，就是相当于给对应的key重新赋值，就会把原来的值覆盖掉 // 自身方法 localStorage.setItem("name","TOM"); // []方法 localStorage["name"]="TOM"; // .方法 localStorage.name="TOM"; 4.移除某一个值，可以通过对象删除属性的关键字delete也可以用自身的方法removeItem //

订阅 localstorage