html5移动开发实战必备知识——本地存储

fareise      2022-02-06     3

关键词:

         本地缓存是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移动开发实战必备知识——本地存储

...; 本地缓存是HTML5出现的新技术,这个技术的出现使得移动web的开发成为了可能。我们都知道。要想打造一个高性能的移动应用,速度是关键。而在HTML5之前。仅仅有cookie可以存储数据,大小仅仅有4kb。这严重限制了应用文件... 查看详情

web前端开发需要掌握的几个必备技术

...、拖拽、变形、JQueryUI组件基本使用。第二阶段:HTML5和移动Web开发HTML5:HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.CSS3:CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变... 查看详情

移动端web开发前端知识整理

...stran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端Web开发前端知识,不定期更新。HTML5可以做什么拍照获取地理位置手势canvas绘图和动画(硬件加速)localstorage,本地缓存HTML5动画效果demohttp://fff.cmiscm.com/#!/mainCS 查看详情

html5移动web开发实战pdf扫描版?

《HTML5移动Web开发实战》提供了应对这一挑战的解决方案。通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台。全书共分10章,从移动Web、设备端配置和优化,变互、响应式设计、... 查看详情

html5移动web开发实战必读书记

原文 http://itindex.net/detail/50689-html5-移动-web主题HTML5一、配置移动开发环境1.各种仿真器、模拟器的下载安装http://www.mobilexweb.com/emulatorshttps://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulator 查看详情

html5本地存储indexeddb基础使用

...够在线和离线访问Web应用程序。此外,本地数据持久性使移动应用程序更灵敏,使用的带宽更少,而且能够在低带宽场景中更高效地工作。HTML5提供了一些本地数据持久性选项。第一个选项是 localstorage,它支持您使用一个简... 查看详情

移动端h5网页开发必备知识(代码片段)

简介工欲善其事必先利其器,今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的移动端H5网页开发常见问题汇总移动... 查看详情

html5本地存储(仅仅记录自己已经用到的知识)

   存储数据:           window.localStorage.setItem(‘key‘,score1);         window.localStorage.setItem(‘k 查看详情

开发必备小知识(代码片段)

1.Git代码无法上传的解决办法gitpulloriginipaas_configgitpullgitpush--forceoriginipaas_config2.本地springboot项目启动,端口被占用的解决办法:taskkill/imjava.exe/f3.sql里的innerjoin和=等号有区别join是基于hashtable连接比较, 查看详情

前端核心技术必备知识库精华资源强力推荐

...HTML5研发工程师谷震平(@guzhenping)等多位HTML5领域专家、开发高手担任特邀编辑参与内容审核,已收录各核心技术点下精华文章145篇及其他优 查看详情

学习web前端开发,需要掌握哪些知识

...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情

安卓开发教程-实战网页源代码查看器,安卓程序员必备

本系列教程致力于可以快速的进行学习安卓开发,按照项目式的方法,通常一篇文章会做一个小程序。提高学习的兴趣。一方面总结自己所得,另一方面可以通过自己的分享帮助更多学习的同仁。因为知识的连贯性,推荐按照瞬... 查看详情

知识图谱开发实战:搭建上市公司知识图谱(代码片段)

搭建上市公司知识图谱(二)学习目标1.获取上市公司公开数据1.1获取上市公司列表与行业信息1.2代码展示2.从网站爬取上市公司网页并存储为HTML文件2.1准备环境2.2爬取上市公司公开信息3.解析HTML文件,获取高管信息... 查看详情

html5移动端布局实战开发课程

参考技术A⑴5做移动端开发有什么优势HTML5的前景是非抄常好的,企袭业现在安卓、iOS开发人员都在学习HTML5混合开发,节约成本、一专多能是未来很多企业用人趋势!HTML5工程师在今后的工作中与Android、iOS工程师对接的几率非常... 查看详情

html5移动端web

...的GeolocationAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI移动前端开发可分为:手机网页开发。这部分跟web前端开发差别不大,使用的技术都 查看详情

otpub知识课堂:云存储和本地存储之间的区别

1. 本地存储是指将数据存放到本地磁盘、或移动硬盘、U盘、光盘等存储设备上。通俗来说就是把自己的数据如文档、视频、图片、音乐等,存到到自己的电脑上、或存放到移动硬盘、U盘、光盘上。2. 云存储是一种新兴的... 查看详情

全栈工程师必备:安卓移动端手机开发,第六课

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活。提供程序员技术及生活指导干货。本系列课程致力于老手程序员可以快速入门学习安卓开发。系统全面的从一个.Net程序员的角度一步步学习总结安卓开发。上... 查看详情

项目实战之本地存储篇(代码片段)

在前端项目开发中,前端的本地存储是必不可少的,今天小编就前端的本地存储在项目中的使用详细的介绍一下。前端本地存储主要有:cookielocalStoragesessionStoragewebSQL/indexDB接下来就这三种前端常用的存储方式进行介绍。cookiecooki... 查看详情