<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<input type="button" value="返回个数" onclick="getLen()" />

		<input type="button" value="增加" onclick="add();" />

		<input type="button" value="修改" onclick="update();" />

		<input type="button" value="删除" onclick="del();" />

		<input type="button" value="返回value" onclick="get();" />

		<input type="button" value="返回key" onclick="getKey();" />

		<input type="button" value="清空" onclick="delAll();" />

		<script>

			var i = localStorage.length; //计数变量

			//返回web存储的键值对的个数

			function getLen() {

				alert(localStorage.length);

			}

			//设置键值对

			function add() {

				localStorage.setItem('username' + i,'jack' + i);

				i ++;

				alert('存储成功');

			}

			//修改键值对

			function update() {

				localStorage.setItem('username2','李四');

				alert('修改成功');

			}

			//删除键值对

			function del() {

				localStorage.removeItem('username2');

				alert('删除成功');

			}

			//返回键对应的值

			function get() {

				var result = localStorage.getItem('username3');

				alert(result);

			}

			//通过下标，返回key

			function getKey() {

				var key = localStorage.key(3);

				alert(key);

			}

			//删除所有数据

			function delAll() {

				localStorage.clear();

				alert('数据被清空');

			}

		</script>

	</body>

</html>

　　

h5-26-web本地存储的更多相关文章

  1. web 本地存储 （localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  2. web本地存储

    Web本地存储 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储. 在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求 ...

  3. [web 前端] web本地存储（localStorage、sessionStorage）

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  4. web本地存储（localStorage、sessionStorage）

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  5. Html5 web 本地存储 （localStorage、sessionStorage）

    HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...

  6. Html5 web本地存储

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  7. h5新增属性本地存储

    ---恢复内容开始--- 存储的两种类型: localStorage 和 sessionStorage localstorage:没有时间限制的数据存储 sessionStorage  针对一个ses ...

  8. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  9. web本地存储 sessionStorage 和 localStorage

    1.sessionStorage  临时存储 为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载. 2.localStorage 长期存储 与sessionStorage一样,但在 ...

  10. H5新特性 本地存储---cookie localStorage sessionStorage

    本地存储的作用 :避免登录网站时,用户在页面浏览时重复登录,也可以实现快速登录,一段时间内保存用户的登录效果,提高页面访问速率 在html5中提供三种数据持久化操作的方法: 1.cookie 可看作是 ...

随机推荐

  1. 第一讲：使用html5——canvas绘制奥运五环

    <html> <head> <title>初识canvas</title> </head> <body> <canvas ...

  2. TreeSet实现Comparator接口的排序算法的分析

    为了方便,用lambda表达式代替comparator接口 例子如下: public static void main(String[] args) { TreeSet<Integer> ...

  3. C++ JSON解析库RapidJSON

    https://github.com/Tencent/rapidjson jsontext.txt { "result" : [ { "face_id" : & ...

  4. 中国vs美国制造业公司营业额大排名，看看哪些属于美国制造业的优势产业（中美旗鼓相当，而且还有本土制造的优势）

    当然,所谓的美国制造业,大量的东西现在 在中国制造和生产,但这里列举的,主要是卖实体工业产品为主的美国公司这个榜单里主要列出以工业产品销售为主的公司. 所以各大能源巨头虽然本身也是装备制造大户,但没被 ...

  5. jQuery整理笔记九----功能性表格开发

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/hai_cheng001/article/details/27536965 演示样例中用到的一些图片. ...

  6. 高cpu分析

    http://www.blogjava.net/hankchen/archive/2012/05/09/377735.html http://www.open-open.com/lib/view/op ...

  7. ZOJ3469 Food Delivery —— 区间DP

    题目链接:https://vjudge.net/problem/ZOJ-3469 Food Delivery Time Limit: 2 Seconds      Memory Limit: 6553 ...

  8. Couldn't connect to host, port: smtp.163.com, 25; timeout -1;

    运行出现以下报错: Couldn't connect to host, port: smtp.163.com, 25; timeout -1; 也要设置端口 spring.mail.port=25

  9. poj 1469 COURSES 解题报告

    题目链接:http://poj.org/problem?id=1469 题目意思:有 N 个人,P个课程,每一个课程有一些学生参加(0个.1个或多个参加).问 能否使得 P 个课程 恰好与 P 个学生 ...

  10. CollapsingToolbarLayout 收缩显示tilte

    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id. ...