本地缓存是HTML5出现的新技术,这个技术的出现使得移动web的开发成为了可能。我们都知道。要想打造一个高性能的移动应用,速度是关键。而在HTML5之前。仅仅有cookie可以存储数据,大小仅仅有4kb。这严重限制了应用文件的存储,导致web开发的移动应用程序须要较长的载入时间。有了本地存储,让web移动应用可以更接近原生。

浏览器中,本地存储通过window.localStorage调用。推断浏览器是否支持本地存储的代码例如以下:

if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT supportlocalStorage');
}

假设我们要将数据存储到本地。最简单的方法就是为window。

localStorage加入一个属性并为其赋值。

比如我们要存储一个数据name。它的值为Tom,就能够通过例如以下方式实现:

window.localStorage.name = “Tom”

这里要注意字符串变量须要引號。当我们想取出本地存储中的数据市。能够利用getItem方法。整个代码流程例如以下:

var storage = window.localStorage;
storage.name = “Tom”;
//取出name数据
var name1 = storage.getItem(“name”);
alert(name1);

这段代码在Chrome浏览器控制台中的显示结果就是一个显示Tom的提示框。可见我们已经通过这样的方式正确的进行了数据的存储与读取。

假设我们想删除这些存储的数据。能够使用removeItem方法。在以上代码中增加例如以下代码:

storage.removeItem(“name”);

这时当我们再次alert的时候将显示null。由于这个数据已经被清空了。

HTML5移动开发实战必备知识——本地存储(1)的更多相关文章

  1. HTML5移动开发实战必备知识——本地存储(2)

    了解了一些主要的本地存储使用方法和思想后.我们来系统的介绍一下本地存储. 本地存储分为三大类:localStorage/sessionStorage/本地数据库 localStorage和sessio ...

  2. HTML5 学习总结(三)——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  3. HTML5 学习笔记(三)——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  4. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. HTML5游戏开发实战--当心

    1.WebSocket它是HTML5该标准的一部分.Web页面可以用它来连接到持久socketserver在.该接口提供一个浏览器和server与事件驱动的连接.这意味着client每次需要时不再se ...

  6. HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

    HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...

  7. HTML5系列三(多媒体播放、本地存储、本地数据库、离线应用)

    各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...

  8. iOS开发查看手机app本地存储的文件

    开发过程中,有时会在本地存储一些文件,但是我们不确定有没有存上,可以通过以下方法来查看测试手机上本地存储的文件: 1.选择xcode上面的window下面的Devices 2.先在左边选中你当前的设备 ...

  9. HTML5规范的本地存储

    在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorag ...

随机推荐

  1. Linux系列-安装经常使用软件

    安装JDK: 理论篇: 一.下载JDK 二.安装 ①复制到/usr/java/路径下 [plain] view plaincopy #mkdir /usr/java/ #cp jdk-7u25-lin ...

  2. localStorage存储数据位置

    chrome浏览器:C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中,虽然后缀名是.loc ...

  3. Flask项目之手机端租房网站的实战开发(十一)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  4. 洛谷——U10223 Cx大帝远征埃及

    https://www.luogu.org/problem/show?pid=U10223#sub 题目背景 众所周知,Cx是一个宇宙大犇.Cx能文善武,一直在为大一统的实现而努力奋斗着.Cx将调用他 ...

  5. 洛谷 P3650 [USACO1.3]滑雪课程设计Ski Course Design

    P3650 [USACO1.3]滑雪课程设计Ski Course Design 题目描述 农民约翰的农场里有N座山峰(1<=N<=1000),每座山都有一个在0到100之间的整数的海拔高度 ...

  6. 洛谷 P1097 统计数字

    P1097 统计数字 题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自 ...

  7. Loadrunner--负载生成器

    对场景进行设计后,接着需要对负载生成器进行管理和设置.Load Generator是运行脚本的负载引擎,在默认情况下使用本地的负载生成器来运行脚本,但是模拟用户行为也需要消耗一定的系统资源,所以在一台 ...

  8. UML学习总结(2)——StartUML 各种类图的例子

    1.UML分为: 1)静态建模:系统基础和系统固定框架结构,这些图形往往是"静态"的. 类图(Class Diagram):常用来分析业务概念 用例图(Use Case Diagr ...

  9. Spring Boot集成EHCache实现缓存机制

    SpringBoot 缓存(EhCache 2.x 篇) SpringBoot 缓存 在 Spring Boot中,通过@EnableCaching注解自动化配置合适的缓存管理器(CacheManag ...

  10. 博客已迁移至http://blog.csdn.net/lujinhong2/

    http://blog.csdn.net/lujinhong2/ 请继续关注