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 存储的更多相关文章

  1. HTML5中Web存储

    HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...

  2. html5的web存储

    在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...

  3. 【html5】Web存储_locaStorage对象的应用

    Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...

  4. HTML5 总结-Web存储-7

    HTML 5 Web 存储 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 ses ...

  5. 【我的前端自学之路】【HTML5】web 存储

    以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...

  6. html5的web存储详解

    以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足 ...

  7. Html5的Web存储和WebSql

    HTML5 Web 存储 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是cookies.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用 ...

  8. HTML5的web 存储localStorage、sessionStorage

    说明 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案.我们可以使用localStorage ...

  9. HTML5新增web存储方式

    客户端存储数据的两个对象为: 两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间 ①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件: ...

  10. html5的web存储与cookie的区别

    以下从3个方面进行比较: 1,容量:cookie只有4KB,localStorage和sessionStorage最大容量5M 2,是否会携带到ajax中:cookie由每个对服务器的请求来传递,会影 ...

随机推荐

  1. webpack从单页面到多页面

    前言 从上次更完webpack从什么都不懂到入门之后,好久没有更新过文章了,可能是因为自己懒了吧.今天看了下自己的索引量少了一半o(╥﹏╥)o,发现事态严重,赶紧更新一篇23333 也是因为最近踩了一 ...

  2. org.openqa.selenium.WebDriverException: It is impossible to create a new session because 'createSession' which takes HttpClient, InputStream and long was not found or it is not accessible 异常

    检查项目配置的jdk版本是否过低,修改一下配置就解决了.如果是jdk版本过低的就升级一下jdk.

  3. [Web][学习随笔]Session&cookie

    Session 从登录建立连接到退出就是一次会话.Session数据就会在会话期间用户存在服务器端的数据.这样,当用户在Web页之间跳转时,存储在Session对象中的变量将不会丢失,而是在整个用户会 ...

  4. xlwings--Python for Excel

    xlwings 中文文档 xlwings,让excel飞起来! xlwings 的使用教程

  5. 面试：在面试中关于List（ArrayList、LinkedList）集合会怎么问呢？你该如何回答呢？

    前言 在一开始基础面的时候,很多面试官可能会问List集合一些基础知识,比如: ArrayList默认大小是多少,是如何扩容的? ArrayList和LinkedList的底层数据结构是什么? Arr ...

  6. Codeforces Round #647 (Div. 2)

    Problem A https://codeforces.com/contest/1362/problem/A 判断x/y是不是2的k次方, 如果是 k/3 + (k%3)/2 + (k%3%2)即为 ...

  7. C++ Primer Plus（一）

    完整阅读C++ Primer Plus 系统重新学习C++语言部分,记录重要但易被忽略的,关键但易被遗忘的. 预备 1.C++相对于C增加了最关键的两项,面向对象和范型编程. 处理数据 2.对于变量明 ...

  8. Zookeeper面试专题

    Zookeeper面试专题 1. Zookeeper是什么框架 分布式的.开源的分布式应用程序协调服务,原本是Hadoop.HBase的一个重要组件.它为分布式应用提供一致性服务的软件,包括:配置维护 ...

  9. 2、struct2的工作流程

    1.首先执行StrutsPrepareAndExecuteFilter,调用StrutsPrepareAndExecuteFilter类的doFilter方法 在该方法中会产生一个ActionMapp ...

  10. 入门大数据---ClouderaManager和CDH是什么？

    1.CDH概述 CDH(Cloudra's Distribution Apache Of Hadoop)是Apache Hadoop和相关项目的最完整,经过测试和最流行的发行版.CDH提供Hadoop ...