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

随机推荐

Swift 语法总结
1,用 var 定义变量 ,与js类似. let 用于定义常量,定义完后不能修改. var 用于定义变量,可以修改. swift可以自动识别属性类别. 2,使用 import 语句来引入任何的 Obj ...
滴滴数据驱动利器：AB实验之分组提效
桔妹导读:在各大互联网公司都提倡数据驱动的今天,AB实验是我们进行决策分析的一个重要利器.一次实验过程会包含多个环节,今天主要给大家分享滴滴实验平台在分组环节推出的一种提升分组均匀性的新方法.本文首先 ...
Zabbix+Orabbix监控oracle数据库表空间
Orabbix 是设计用来为 zabbix 监控 Oracle 数据库的插件,它提供多层次的监控,包括可用性和服务器性能指标. 它提供了从众多 oracle 实例采集数据的有效机制,进而提供此信息的监 ...
04-Python基础3
本节内容迭代器&生成器装饰器 Json & pickle 数据序列化软件目录结构规范作业:ATM项目开发 1.列表生成式,迭代器&生成器列表生成式孩子,我现在有个需 ...
MongoDB知识点总结
一:MongoDB 概述一.NoSQL 简介 1. 概念:NoSQL(Not Only SQL的缩写),指的是非关系型数据库,是对不同于传统的关系型数据库的数据库管理系统的统称.用于超大规模数 ...
小师妹学JavaIO之:Buffer和Buff
目录简介 Buffer是什么 Buffer进阶创建Buffer Direct VS non-Direct Buffer的日常操作向Buffer写数据从Buffer读数据 rewind Buff ...
python3 中调用post和get接口
用了很多方法都没有这个实用 POST API接口: import jsonimport requestsif __name__ == '__main__': url = "http://12 ...
CSS文本相关之水平排列[4]
在正常流中,文本都是从左往右.自上而下排列显示,如果想要改变排列方向的话,可以通过CSS属性来改变. text-align属性文本排列(text-align)可改变文本在水平上的方向,但不改变内部的 ...
.Net Core基础的健康检查
前言健康检查能查看我们的应用程序当前是否是一个健康的运行状态.微软已经给我们提供了健康检查轮子,只需要简单的配置就能完成服务的状态检查.一起来实现一个最简单的健康检查吧. 开始新建一个空的webA ...
商城06——solr索引库搭建&solr搜索功能实现&图片显示问题解决
1. 课程计划 1.搜索工程的搭建 2.linux下solr服务的搭建 3.Solrj使用测试 4.把数据库中的数据导入索引库 5.搜索功能的实现 2. 搜索工程搭建要实现搜索功能,需要搭建 ...

HTML5（七）Web 存储