web存储

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Lik - web存储</title>
	</head>

	<body>
		<script type="text/javascript">
			window.onload = function() {

				//定义一个数组
				var arr = [];
				for(var i = 0; i <= 5; i++) {
					arr[i] = i + "abc";
				}

				//定义一个对象
				var a = {
					a1: 123,
					a2: 345,
					a3: 456
				}
				a = JSON.stringify(a); //JSON对象提供的parse和stringify将其他数据类型转化成字符串 

				//localStorage		数据将一直存放在手机缓存中,直到用户清理缓存
				//sessionStorage 	页面关闭时,销毁存储的数据

				localStorage.a = "dddd"; //存储一个字符串
				localStorage.b = 55; //存储一个数字
				localStorage.c = arr; //存储一个数组
				localStorage.d = a; //存储一个对象
				localStorage.f = false; //存储一个布尔值
				//所有数据都只能被当作字符串存储,不论之前存储的是什么格式,都会被转换为字符串

				var tex1 = localStorage.a;
				var tex2 = localStorage.b;
				var tex3 = localStorage.c;
				var tex4 = JSON.parse(localStorage.d); //将字符串重新转换为对象
				var tex5 = localStorage.f;

				console.log(tex1); //显示字符串
				console.log(tex2); //显示一个数字字符串
				console.log(tex3); //显示一个数组字符串
				console.log(tex4.a2); //显示一个对象,因为在上面一步中,对字符串进行了格式转换
				console.log(tex5); //显示一个布尔值字符串
			}
		</script>
	</body>

</html>

  效果如下图:

时间: 2024-08-03 15:18:05

web存储的相关文章

【温故而知新-Javascript】使用Web存储

Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS:还有一种存储规范名为“索引数据库API”(Indexed Database API),它允许保存富格式数据和进行SQL风格的查询. 1.使用本地存储 我们可以通过全局属性 localStorage访问本地存储功能.这个属性会返回一个Storage 对象,下表对其进行了介绍.Storage 对象被用来

Web 存储简介

什么是 Web 存储? Web 存储通常与 HTTP Cookie 相仿.与 Cookie 类似,Web开发人员可以将每次会话或域特定的数据作为名称/值对存储在使用 Web 存储的客户端上.但是,与 Cookie不同的是,在控制某个窗口存储的信息如何向其他窗口显示时,Web 存储要更为简单. 例如,用户可能会打开两个浏览器窗口,购买两个不同航班的机票.然而,如果航空公司的 Web 应用程序使用 Cookie存储其会话状态,那么相关信息可能会从一笔交易“泄露”至另一笔交易,进而导致用户可能在未得到

浅谈web存储

1.先来说说之前的客户端存储吧~在html5出来之前~客户端存储主要是使用cookie~不过这种古老的方式存在着好一些弊端~举例如下: 可以存储的数据的大小受到限制~官方指出一个域名下最多可以存储4k的数据(有点少吧~~) cookie的数据放到了http请求头上~这样不仅使得http请求头变得臃肿~过多的cookie会使请求越来越慢~同时还带来了安全的问题~这玩意默认是明文的 同时注意cookie是会过期的~ 2.还有一种存储方式是userData~但是这个只有ie支持~考虑到平台的限制~此处

HTML5 鼠标拖拽以及web存储

html5 拖拽: (function(){}())执行匿名函数,要用括号包括起来: 1:用鼠标事件来做拖拽: 2:在HTML5中加入draggable="true",就可以拖拽但是是分成了两个,这个更有效率: ondragstart:拖拽开始: ondrag:拖拽中 ondragend:拖拽结束: ondragenter:进入投放去: ondragover:投放区移动: ondragleave:离开投放区: ondrop:投放区投放:           ondragover会阻止d

客户端存储之HTML5 web存储

最近在学习如何实现客户端存储,这篇文章将主要分析H5的web storage以及它与传统的cookie之间的区别. web存储与cookie的区别以及优势: 1.cookie只适合存储少量文本数据,而web存储可存储大量数据 2.以cookie存储的数据,无论服务器端是否需要,每次HTTP请求时,都会将cookie数据传送到服务端,有时会造成带宽浪费,而web storage 中的数据只会存储在本地 3.web storage有更加丰富易用的接口,比如setItem().getItem().re

关于web存储

web存储有很多种,具体的运用要看具体的情况. 我们先来看第一种: 这是html代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sessionStorage</title> </head> <body> <label for="in1">键值名

HTML5新增web存储方式

客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ②sessionStorage - 针对一个 session 的数据存储 当浏览器关闭时,sessionStorage就被清空: 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage: [Storage的数据存储] 1.Storage可以像普通对象一

HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption></figcaption>: 多媒体标题 方法: load() 加载.play()播放.pause()暂停 属性: currentTime 视频播放的当前进度. duration:视频的总时间. paused:视频播放的状态 事件:   oncanplay:事件在用户可以开始播放视频/音频(aud

HTML5 Web 存储

localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage - 没有时间限制的数据存储 localStorage 对象 localStorage 对象存储的数据没有时间限制.第二天.第二周或下一年之后,数据依然可用. sessionStorage - 针对一个 session 的数据存储 sessionStorage 方法针对一个 session 进行数据存储.当用户关闭浏览器窗口后,数据会被删除. 如何创建并访问一个 sessionSto