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由每个对服务器的请求来传递,会影 ...

随机推荐

python numpy 库
引用文章:https://blog.csdn.net/xjl271314/article/details/80409034
EasyARM-iMX257 linxu两年前的笔记
第三章续:简单总结第三章中出现的命令! 1) root@EasyARM-iMX257 ~# ddif=/dev/zero of=/dev/shm/disk bs=1024 count=10240 d ...
性能调优必备利器之 JMH
if 快还是 switch 快?HashMap 的初始化 size 要不要指定,指定之后性能可以提高多少?各种序列化方法哪个耗时更短? 无论出自何种原因需要进行性能评估,量化指标总是必要的. 在大部分 ...
Redis的内存和实现机制
1. Reids内存的划分数据内存统计在used_memory中进程本身运行需要内存 Redis主进程本身运行需要的内存占用,代码.常量池等缓冲内存,客户端缓冲区.复制积压缓冲区.AOF缓冲区 ...
StringBuilder（拼接字符串省内存）
观察如下代码: String s = ""; for (int i = 0; i < 1000; i++) { s = s + "," + i; } 虽然 ...
java中HashMap原理？
参考:https://www.cnblogs.com/yuanblog/p/4441017.html(推荐) https://blog.csdn.net/a745233700/article/deta ...
深入理解Java虚拟机学习笔记（一）-----Java内存区域
一概述对于 Java 程序员来说,在虚拟机自动内存管理机制下,不再需要像C/C++程序开发程序员这样为内一个 new 操作去写对应的 delete/free 操作,不容易出现内存泄漏和内存溢出问题 ...
django 注册后台管理在debug=true能行，在debug=false不能显示出管理标签
debug=true 下,如下图:
Elasticsearch系列---生产集群的索引管理
概要索引是我们使用Elasticsearch里最频繁的部分日常的操作都与索引有关,本篇从运维人员的视角,来玩一玩Elasticsearch的索引操作. 基本操作在运维童鞋的视角里,索引的日常操作除 ...
Windows安装C的编译环境
对于java开发者来说安装C的编译环境不是非常熟悉,因此本文对C的安装环境进行介绍以及windows编译Redis和Zookeeper的过程.MinGW主要用于按照gcc.make等环境,cywin用 ...

HTML5（七）Web 存储