localstorage

Html5学习系列

眉间皱痕 提交于 2020-01-19 19:00:41
Html5学习系列 HTML5 规定了一种通过 video 元素来包含视频的标准方法 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 如需在 HTML5 中显示视频,您所有需要的是: <video src="movie.ogg" controls="controls"> </video> control 属性供添加播放、暂停和音量控件。 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。 <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的: 实例 <audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio> HTML5 拖放实例 设置元素为可拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true : <img draggable="true" /> 拖动什么 - ondragstart 和 setData() 然后

JavaScript | 面向对象 localstorage

ぐ巨炮叔叔 提交于 2020-01-14 11:55:48
Evernote Export */ /*--> */ 第一节 localstorge 什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的, 解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k), localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同 localStorage的优势 1、localStorage拓展了cookie的4K限制 2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的 localStorage的局限 1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性 2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换 localStorage的写入 , localStorage的写入 有三种方法。 localStorage只支持string类型的存储 var storage=window.localStorage; //写入a字段 storage[

angularJS 自定义指令 分页

十年热恋 提交于 2020-01-13 04:29:19
原理和使用说明 1、插件源码主要基于angular directive来实现。 2、调用时关键地方是后台请求处理函数,也就是从后台取数据。 3、插件有两个关键参数currentPage、itemsPerPage,当前页码和每页的记录数。 4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。 在调用的页码中我使用了$watch来监控。 我初次使用时是把调用函数放在了插件的onchange中,结果发现每次都会触发两次后台。这个地方需要注意。 5、我把请求后台封装成了Service层,然后在Controller里调用,也符合MVC思想。 效果图 调用代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 <div ng-app= "DemoApp" ng-controller= "DemoController" > <table class = "table table-striped" > <thead> <tr>

localStorage存对象取出来不是对象怎么办

两盒软妹~` 提交于 2020-01-12 13:43:28
存入之后值[object Object]的 取出来又不能用obj.attr来获取值,解决方法如下: localStorage.setItem(‘logo’,JSON.stringify(res.logo)) 先转换为json字符串 JSON.parse(localStorage.getItem(‘logo’)) 取出来再转为json对象 这问题小程序和vue项目都一样 来源: CSDN 作者: 码林鼠 链接: https://blog.csdn.net/weixin_41254345/article/details/103830525

浏览器端的缓存localStorage应用

允我心安 提交于 2020-01-10 19:27:20
服务器传输大量信息到客户端(浏览器),即使有了服务器端缓存,用户每次打开web页面都需要请求服务器,传输大量信息,然后渲染。 主要存在网络传输成本,如果我们将大量的不太会变动的字典信息存储于localStorage,就能实现高性能的操作。 由于localStorage是永久的,自身没有过期时间,这对我们的字典变动存在一些不同步的问题,除了浏览器端用户手动点击清缓存,我打算给localStorage结合一个有效期来自动清除。 customLocalStorage.js 1 var __localStorage = { 2 set : function(key, value, mins){ 3 if(!window.localStorage){//浏览器ie8以下不支持,直接跳过 4 return; 5 } 6 if(typeof(mins) == 'undefined'){ 7 var item = { 8 data : value 9 }; 10 }else{ 11 var item = { 12 data : value, 13 endTime : new Date() . getTime() + mins * 60 * 1000 14 }; 15 } 16 localStorage.setItem(key, JSON.stringify(item)); 17 }, 18 get

localStorage本地存储

不羁岁月 提交于 2020-01-08 16:23:05
1. 直接存取字符串 localStorage.setItem('key', '你要存取的值'); 读取 localStorage.getItem('key'); 2. 存取 数组 存取数组之前利用JSON.stringify()将数组解析成字符串,读取时利用JSON.parse()转换成数组 localStorage.setItem( 'key' , JSON.stringify(arr) ); //arr 是你要存的数组 读取 JSON.parse (localStorage.getItem('key')); 来源: https://www.cnblogs.com/cxx9759/p/12167198.html

HTML5 Web 存储

三世轮回 提交于 2020-01-07 07:08:03
一、HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式。 使用HTML5可以在本地存储用户的浏览数据。 早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用。 浏览器支持 Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。 注意: Internet Explorer 7 及更早IE版本不支持web 存储. 二、localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。 sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: if(typeof(Storage)!=="undefined") { // 是的! 支持 localStorage sessionStorage 对象! /

3.1.1 HTML5存储

主宰稳场 提交于 2020-01-06 14:41:57
一.介绍 二.HTML5本地存储 (一).Localstorage (二).API (三).存储时效 (四).indexDB (五).indexDB-索引 (六).indexDB-游标 三.游标索引结合与区别 (一).IndexDB-游标索引结合 (二).indexDB-区别 四.课程总结 (一)介绍 1. 本地存储 : (1) .web storage (2) .IndexedDB 2. 本地存储的扩展介绍。 3. 离线存储-app cache。 4. 分析存储需求 : ( 1 ). 照顾2g,3g网络的体验。 ( 2 ). 流量节省。 ( 3 ). 在离线情况下使用。 cookie做不到,cookie的局限性:存储大小限制,仅4kb。单个域名下的数量限制,50个左右。污染请求头,浪费流量。 二.HTML5本地存储 (一)Localstorage localStorage和sessionStorage 1. 本地存储和离线存储相同的使用方法: ( 1 ). setItem方法设置存储内容。localStorage.setItem('Key', 'Value'); ( 2 ). getItem方法获取存储内容。localStorage.getItem('Key');//返回value值。 ( 3 ). 使用removeItem方法删除存储内容。(一个一个删)

js 页面定时刷新

家住魔仙堡 提交于 2020-01-05 02:30:12
html <label class="am-switch am-switch-lg"> <input type="checkbox" id="check_is_f"> <span class="am-switch-checkbox"></span> </label> 定时刷新 js //定时刷新 is_f = localStorage.getItem("is_f"); if(is_f == 2){ $('#check_is_f').attr("checked", true); tf = setTimeout('myrefresh()',5000); //指定秒刷新一次 } $('.am-switch input[type=checkbox]').on('click',function(){ if($(this).is(':checked')){ localStorage.setItem("is_f",2); tf = setTimeout('myrefresh()',5000); //指定秒刷新一次 }else{ clearTimeout(tf); //取消自动刷新 localStorage.setItem("is_f",0); } }) function myrefresh(){ window.location.reload(); } 效果:复选框勾中,页面开始每五秒刷新

HTML5的十大新特性

独自空忆成欢 提交于 2020-01-03 07:12:31
为了更好地处理今天的互联网应用,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 地址的输入域