HTML5中的数据存储

最新推荐文章于 2024-04-06 08:27:25 发布

重新学习的前端仔

最新推荐文章于 2024-04-06 08:27:25 发布

阅读量233

点赞数 1

分类专栏：被逼的

本文链接：https://blog.csdn.net/qq_42158442/article/details/82883228

版权

被逼的专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.初始WebStorage

2.使用WebStorage中的API

一.什么是Web Storage

WebStorage功能就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种存储类型：sessionStorage和localStroage二者都支持在同域下存储5MB数据，与cookies相比有着明显的优势。

sessionStorage将数据保存在session对象中。所谓session,是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，即浏览这个网站所花费的事件。session对象可以用来保存在这段时间内索要保存的任何数据。

localStroage将数据保存在客户端本地的硬件设备中，即使关闭了浏览器，改数据仍然存在，下次打开浏览器访问网站仍然可以继续使用。

这两种不同的存储类型区别在于,sessionStorage为临时存储，而localStoage为永久保存。

二.使用webstorage中的API

API	描述
length	获取当前WebStorage中的数目
key	返回WebStorage中的第N个存储条目
getItem(key)	返回指定key的存储内容，如果不存在则返回null。注意,返回的类型是字符串类型
setItem(key,value)	设置指定key的内容的值为value
removeItem(key)	根据指定的key，删除键值为key的内容
clear	清空webStorage的内容

2.1 数据的存储与获取

在localStorage中设置键值对可以应用setItem()

localStorage.setItem("key","value")

在localStorage获取数据可以用getItem()

var val = localStroage.getItem("key")

当然也可以直接使用localStorage的key方法，而不使用setItem()和getItem()，代码如下:

localStroage.key = "value"

var val = localStroage.key

2.2 数据的删除和清空

removeItem()用于Stroage列表删除数据

var val = localStroage. removeItem(key)

clear()方法用于清空整个列表的所有数据

localStroage.clear()

同时可以通过使用length属性获取sessionStorage中存储的键/值对的个数

2.2 JSON对象存储(重点)

虽然HTML5 Web Storage 规范允许将任意的类型的对象保存为键/值对的形式，实际情况却是一些浏览器将数据限定为文本字符串类型。不过，既然主流的浏览器原生支持JSON，就解决了这个问题。JSON格式是JavaScript Object Notation的缩写。

JSON是一种将对象和字符串可以相互表示的数据转换标准。JSON一直是通过HTTP将对象从浏览器传送到服务器一种常用格式。现在，可以通过序列化对象将JSON数据保存在Storage中，以实现复杂数据类型的持久化。

1.var str = JSON.stringify(data)

该参数接受一个参数data,该参数表示要转换成JSON格式文本数据的对象。这个方法的作用是将对象转换成JSON格式的文本数据，并将其返回。

2.var str = JSON.parse(str)

该参数接受一个参数str，此参数表示从localStorage中取得的数据，该方法的作用是将传入的数据转换成json对象，并且返回。

下面是试例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
		<style>
			*{
				margin: 0;
			}
			.section{
				width: 500px;
				margin:0 auto;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="section">
			<p>
				床前明月光
			</p>
			<p>
				疑是地上霜
			</p>
			<p>
				举头望明月
			</p>
			<p>
				低头思故乡
			</p>
			
			<button class="btn big">放大</button>
			<button class="btn small">缩小</button>
			<button class="btn bgcolor" data-color = "red">红色</button>
			<button class="btn bgcolor" data-color = "green">绿色</button>
			<button class="btn bgcolor" data-color = "yellow">黄色</button>
		</div>
		<script>
			
			$(function(){
				var num = localStorage.getItem("bigSize") || 16
				var color = localStorage.getItem("fontColor") || "black"
				$(".section").css("font-size",num+"px")
				$(".section p").css("color",color)
				$(".big").click(function(){
					num++
//					console.log(num)
					if(num>20){
						return
					}
					
					$(".section").css("font-size",num+"px")
					localStorage.setItem("bigSize",num)
				})
				
				$(".small").click(function(){
					num--
					if(num<12){
						num=12
						localStorage.setItem("bigSize",num)
					}
					$(".section").css("font-size",num+"px")
					localStorage.setItem("bigSize",num)
				})
				
				$(".bgcolor").click(function(){
					var color = $(this).data("color")
//					console.log(color)
					$(".section p").css("color",color)
					localStorage.setItem("fontColor",color)
				})
				
			})
			
			
			
		</script>
	</body>
</html>

重新学习的前端仔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中的数据存储

1.初始WebStorage2.使用WebStorage中的API 一.什么是Web Storage WebStorage功能就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的。它包含两种存储类型：sessionStorage和localStroage二者都支持在同域下存储5MB数据，与cookies相比有着明显的优势。 sess...
复制链接

扫一扫

专栏目录