本地缓存是HTML5出现的新技术,这个技术的出现使得移动web的开发成为了可能。我们都知道,要想打造一个高性能的移动应用,速度是关键。而在HTML5之前,只有cookie能够存储数据,大小只有4kb。这严重限制了应用文件的存储,导致web开发的移动应用程序需要较长的加载时间。有了本地存储,让web移动应用能够更接近原生。
浏览器中,本地存储通过window.localStorage调用。判断浏览器是否支持本地存储的代码如下:
如果我们要将数据存储到本地,最简单的方法就是为window。localStorage添加一个属性并为其赋值。例如我们要存储一个数据name,它的值为Tom,就可以通过如下方式实现:
这里要注意字符串变量需要引号。当我们想取出本地存储中的数据市,可以利用getItem方法。整个代码流程如下:
这段代码在Chrome浏览器控制台中的显示结果就是一个显示Tom的提示框。可见我们已经通过这种方式正确的进行了数据的存储与读取。
如果我们想删除这些存储的数据,可以使用removeItem方法。在以上代码中加入如下代码:
这时当我们再次alert的时候将显示null,因为这个数据已经被清空了。
了解了一些基本的本地存储用法和思想后,我们来系统的介绍一下本地存储。
本地存储分为三大类:localStorage/sessionStorage/本地数据库
localStorage和sessionStorage二者的用法、所包含的函数、调用方法等都是相同的,二者仅仅是含义不同。其中,localStorage所存储的数据是长期有效的,而sessionStorage所存储的信息当每个会话(session)关闭时就会销毁(通俗的说就是页面关闭后数据自动销毁)。
由于二者的特性不同,因此应用的场景也有很大区别。通常,当我们需要存储一些用户配置项等一些需要长时间存储的数据信息时,需要使用localStorgae进行保存,利用了其时效长的特点。相应的,当我们需要实现类似购物车等基于session的功能时,就需要使用sessionStorage。
由于localStorage和sessionStorage的用法相同,因此我们以localStorage为例,介绍二者的方法。
1、设置数据setItem
用法为localStorage.setItem(“key”, “value”),表示将value值传递给key。(sessionStorage.setItem使用方法同理,下面不再一一介绍)
2、获取数据getItem
用法为localStorage.getItem(“key”),只要输入相应的key值,就可以从中取出对应的value值。
3、删除特定的数据removeItem
用法为localStorage.removeItem(key),删除key对应的数据。
4、清空所有数据clear
用法为localStorage.clear(),表示清空所有存储系统中的数据。
以上就是一些最基本的sessionStorage/localStorage用法,希望对大家的学习有所帮助。
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,可以...
1.HTML5的内容类型 内容类型 描述 内嵌 向文档中添加其他类型的内容,例如audio...
解决方法如下: 第一种 使用iframe,但是目前使用iframe的人已经越来越少了,而...
content属性一般用于::before、::after伪元素中,用于呈现伪元素的内容。平时con...
注释1:上图整个大背景是这个网页的全部尺寸,中间的小框才是浏览器中的可见尺寸...
简介: 企业上云多账号架构中,如何做到从上到下管理的同时,处理好员工的权限边...
John Au-Yeung 来源:medium 译者:前端小智 有梦想,有干货,微信搜索 【大迁世...
复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
先点赞再看,养成好习惯 前言 这两天在另一个社区看到了一个关于 Tomcat 的提问...
Redis 官方在 2020 年 5 月正式推出 6.0 版本,提供很多振奋人心的新特性,所以...