h5-26-web本地存储

<!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>

  

时间: 2024-11-06 20:13:49

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

Html5 web本地存储

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB. Web Storage又分为两种: sessionStorage localStorage 从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了:而localStorage则一直将数据保存在客户端本地: 不管

web本地存储

随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,每一次发送请求都会携带上cookie,会造成带宽的浪费,给开发带来诸多不便,HTML5规范则提出解决方案. web存储的含义是将数据存储到用户的电脑上,这样可以缓解服务器的压力,并且提高体验.1 特性1.设置.读取方便.2.容量较大,sessionStorage约

web本地存储(localStorage、sessionStorage)

对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存 1. 保存数据到本地 sessionStorage.setItem('key', '你的数据'

H5中的本地存储

1.判断是否支持 2.设置本地存储的方式 3.其他扩展

web本地存储 sessionStorage 和 localStorage

1.sessionStorage  临时存储 为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载. 2.localStorage 长期存储 与sessionStorage一样,但在浏览器关闭之后,数据依然会一直存在 保存数据到本地 var userInfo={ name:"张三", age:24, likes:"song" } sessionStorage.setItem("key",JSON.stringify(userIn

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

目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨域 2.6.存储位置与SQLite 2.7.用途.练习与兼容性 三.sessionStorage 3.1.sessionStorage使用 3.2.Web本地存储事件监听 3.3.cookie.sessionStorage.localStorage比较 四.Web SQL Database 4.1.

彻底搞懂Html5本地存储技术(一)

一.H5之前客户端本地存储的实现 1. cookies cookies的应用比较广泛,但有以下几个问题: (1)每次http请求头上会带着,浪费资源 (2)每个域名客户端只能存储4K大小 (3)会造成主Domain污染 (4)cookies明文传输很不安全 2.UserData(只有IE支持) 3.其他非主流方案 二.H5相关的存储知识 1.本地存储WebStorage (localstorage & sessionstorage) 浏览器支持情况 (1)生命周期 localstorage永久存

HTML5基础扩展——地理位置、本地存储、缓存

HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的web开发,HTML5是比较火的.因此这几款扩展功能,感觉更多是从手机,平板等角度出发的. 一,地理定位:首先看一下地理位置的定位的几种形式:IP地址,GPS(Global Positioning System ),Wifi,GSM(Global System for Mobile Communic

H5新增的Web Storage本地存储

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁. 因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储. 而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的. 一.web storage和cookie的区别Web Sto

本地存储(localStorage、sessionStorage、web Database)

一.sessionStorage和localStorage sessionStorage和localStorage两种方法都是当用户在inPut文本框中输入内容并点击保存数据按钮时保存数据,点击读取数据按钮时读取保存后的数据.不过使用sessionStorage时,只能局限于当前页面,如果关闭浏览器,数据就会丢失,下次打开浏览器就会读不到数据.如果使用localStorage时,即使浏览器关闭,下次打开浏览器仍能读取到上次被保存的数据.但是数据的保存时按不同浏览器分别进行的,也就是说,如果打开别