HTML5 Web 存储

HTML5 web 存储,一个比cookie更好的本地存储方式。

什么是 HTML5 Web 存储?

使用HTML5可以在本地存储用户的浏览数据。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，

但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能。

数据以键/值对存在, web网页的数据只允许该网页访问使用。

localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")

{

    document.write("nice! 支持 localStorage  sessionStorage 对象!");

} else {

    document.write("抱歉! 不支持 web 存储。");

}

两者常用API

功能	API（以localStorage为例，sessionStorage用法一样）
添加键值对	localStorage.setItem(key,value)
通过键获取值	localStorage.getItem(key)
删除单个数据	localStorage.removeItem(key)
删除所有数据	localStorage.clear()
通过下标获取属性名	localStorage.key(index)
键值对数量	localStorage.length

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

实例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>web储存</title>

	<script>

		function count() {

			if (sessionStorage.clickcount)

				sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;

			else

				sessionStorage.clickcount=1;

			var result = document.getElementById("result");

			result.innerHTML = "目前点击次数：" + sessionStorage.clickcount;

		}

		function count2() {

			if (localStorage.clickcount)

				localStorage.clickcount=Number(localStorage.clickcount)+1;

			else

				localStorage.clickcount=1;

			var result_now = document.getElementById("result_now");

			result_now.innerHTML = "历史点击次数：" + localStorage.clickcount;

		}

	</script>

</head>

<body>

	<br/>

	<button onclick="count()">计数</button>

	<p id="result"><br/></p>

	<button onclick="count2()">计数</button>

	<p id="result_now"><br/></p>

</body>

</html>

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

实例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>SessionStorage</title>

	<script>

	//保存数据

	function save(){

		var fruit = document.getElementById("fruit").value;

		var fruit_En = document.getElementById("fruit_En").value;

		localStorage.setItem(fruit, fruit_En);

		alert("添加成功");

	}

	//查找数据

	function find(){

		var search = document.getElementById("search").value;

		var fruit = localStorage.getItem(search);

		var find_result = document.getElementById("find_result");

		find_result.innerHTML = search + "的英文是：" + fruit;

	}

</script>

</head>

<body>

	<div style="border: 2px dashed #ccc;width:320px;text-align:center;">

		<label for="fruit">水 果(key)：</label>

		<input type="text" id="fruit" name="fruit" class="text"/>

		<br/>  

		<label for="fruit_En">单 词(value)：</label>

		<input type="text" id="fruit_En" name="fruit_En"/>

		<br/>  <br/>

		<input type="button" onclick="save()" value="新增记录"/>

		<br/>  <hr/>

		<label for="search">输入水果名：</label>

		<input type="text" id="search" name="search"/>

		<input type="button" onclick="find()" value="查找英文"/>

		<p id="find_result"><br/></p>

	</div>

</body>

</html>

以上实例只是演示了简单的 localStorage 存储与查找，更多情况下我们存储的数据会更复杂。

JSON.stringify 来存储对象数据，JSON.stringify 可以将对象转换为字符串。

JSON.parse是从一个字符串中解析出json(键值对)

HTML5（七）Web 存储的更多相关文章

HTML5中Web存储
HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...
html5的web存储
在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...
【html5】Web存储_locaStorage对象的应用
Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以键/值存储的存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...
HTML5 总结-Web存储-7
HTML 5 Web 存储在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 ses ...
【我的前端自学之路】【HTML5】web 存储
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...
html5的web存储详解
以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足 ...
Html5的Web存储和WebSql
HTML5 Web 存储使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用 ...
HTML5的web 存储localStorage、sessionStorage
说明随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案.我们可以使用localStorage ...
HTML5新增web存储方式
客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据的有效时间 ①localStorage - 没有时间限制的数据存储除非手动删除,否则数据将一直保存在本地文件: ...
html5的web存储与cookie的区别
以下从3个方面进行比较: 1,容量:cookie只有4KB,localStorage和sessionStorage最大容量5M 2,是否会携带到ajax中:cookie由每个对服务器的请求来传递,会影 ...

随机推荐

Java实现第八届蓝桥杯兴趣小组
兴趣小组为丰富同学们的业余文化生活,某高校学生会创办了3个兴趣小组 (以下称A组,B组,C组). 每个小组的学生名单分别在[A.txt],[B.txt]和[C.txt]中. 每个文件中存储的是学生的 ...
利用mitmproxy实现抖音Cookie，设备ID获取(一)
先讲解一下思路,是利用mitmproxy代理https协议,从而判定抖音个人信息接口,在个人信息接口的返回体接收时将用户信息数据,以及Header头(主要是Cookie),Query体(包含设备ID) ...
容器技术之Docker私有镜像仓库harbor
前文我们聊到了docker的私有镜像仓库docker-distribution的搭建和简单的使用,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/13058338 ...
MySQL 8.0权限认证(上)
MySQL 8.0授权认证一.系统权限表 user 存放用户账户信息以及全局级别(所有数据库)权限,决定了来自哪些主机的哪些用户可以访问数据库实例,如果有全局权限则意味着对所有数据库都有此权 ...
03.Java的前世今生
C&C++ 1972年C诞生 ◆贴近硬件,运行极快,效率极高. ◆操作系统,编译器,数据库,网络系统等 ◆指针和内存管理 1982年C++诞生 ◆面向对象 ◆兼容C ◆图形领域.游戏等背景 ...
数据处理一条龙！这15个Python库不可不知
如果你是一名数据科学家或数据分析师,或者只是对这一行业感兴趣,那下文中这些广受欢迎且非常实用的Python库你一定得知道. 从数据收集.清理转化,到数据可视化.图像识别和网页相关,这15个Python ...
mitmproxy的简单使用
第1则 ---抓包工具mitmdump的使用--- 一.什么是抓包?怎么抓包? 1.抓包(packet capture)就是将网络传输发送与接收的数据包进行截获.重发.编辑.转存等操作,也用来检查网络 ...
Spark原始码系列（六）Shuffle的过程解析
问题导读: 1.shuffle过程的划分? 2.shuffle的中间结果如何存储? 3.shuffle的数据如何拉取过来? Shuffle过程的划分 Spark的操作模型是基于RDD的,当调用RD ...
（十一）Maven运行TestNG的testcase 两种方式：testng.xml和testngCase.java
原文:https://blog.csdn.net/wwhrestarting/article/details/46596869?utm_source=copy 1.通过maven-surefire-p ...
Dubbo——SPI及自适应扩展原理
文章目录引言正文一.什么是SPI? 1. Java SPI的实现 2. Dubbo SPI实现原理由配置文件得到的猜想 SPI源码二.自适应扩展机制三.Dubbo IOC 总结引言 Du ...

HTML5（七）Web 存储