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实现亲密数
假设有 a.b 两个数,若 a 的所有因子之和等于 b,b 的所有因子之和等于 a, 并且 a 不等于 b,则称 a 和 b 是一对亲密数.如 284 和 220 就是一对亲密数. 分析: 若要找出 ...
天哪！手动编写mybatis雏形竟然这么简单
前言 mybaits 在ORM 框架中,可算是半壁江山了,由于它是轻量级,半自动加载,灵活性和易拓展性.深受广大公司的喜爱,所以我们程序开发也离不开mybatis .但是我们有对mabtis 源码进行 ...
java关键字volatile用法详解
volatile关键字想必大家都不陌生,在java 5之前有着挺大的争议,在java 5之后才逐渐被大家接受,同时作为java的关键字之一,其作用自然是不可小觑的,要知道它是java.util.con ...
Python面试进阶问题，__init__和__new__的区别是什么？
本文始发于个人公众号:TechFlow,原创不易,求个关注今天这篇是Python专题的第17篇文章,我们来聊聊Python当中一个新的默认函数__new__. 上一篇当中我们讲了如何使用type函数 ...
[博主推荐]如何利用注册的 bug 来疯狂注册,不停开小号"做"事情,支持手机号&邮箱
[博主推荐]如何利用注册的 bug 来疯狂注册,不停开小号"做"事情,支持手机号&邮箱非常简单 1.手机号注册: 用手机号注册网站基本都支持可以用推荐的网址: ...
git status –s
状态简览 git status 命令的输出十分详细,但其用语有些繁琐. 如果你使用 git status -s 命令或 git status --short 命令,你将得到一种更为紧凑的格式输出. 运 ...
（十）深入理解maven构建生命周期和各种plugin插件
链接:https://blog.csdn.net/zhaojianting/article/details/80321488
python基础001----Python+pycharm环境搭建
一.Python下载安装 1.python下载-----下载地址:https://www.python.org/downloads/windows/ 在python的官网下载python版本,需要下载 ...
基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（九）
系列文章基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...
Rust 数据类型
Rust中的每个值都具有特定的数据类型. 基础类型: 整数,浮点数,布尔值和字符 i8,i16,i32,i64,i64,i128,isize, u8,u16,u32,u64,u64,u128,usiz ...

HTML5（七）Web 存储