HTML5（七）Web 存储
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笔记
一.关于python ① 由荷兰人Guido van Rossum(龟叔)于1989年圣诞节为打发无聊时间所编写的编程语言. ② python的特点:优雅 明确 简单.代码量少,运行速度快. 缺点:运 ...
- ZooKeeper 基础入门
什么是ZooKeeper Apache ZooKeeper 是一个开源的实现高可用的分布式协调服务器.ZooKeeper是一种集中式服务,用于维护配置信息,域名服务,提供分布式同步和集群管理.所有这些 ...
- php 常用的redis操作语法
String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象 $redis-> ...
- Jupyter的搭建
在家实在无聊,伏案沉思良久,忽然灵机一动,何不写写Python?然而电脑上的软件早已人是物非,Pycharm已然不复存在.但是又不想装软件找激活码,于是,只好建个Jupyter先凑合一下. 1. 安装 ...
- QTabWidget 中 关于Tab 关闭和添加的基本教程！
QTabWidget是PyQt5 中使用较为广泛的容器之一,经常会在日常使用的软件中用到它:QTabwidget是由几个标签组成,每个标签可以当作一个界面,下面就是应用Qtabwidget的一个简单例 ...
- TensorFlow从0到1之TensorFlow Keras及其用法（25）
Keras 是与 TensorFlow 一起使用的更高级别的作为后端的 API.添加层就像添加一行代码一样简单.在模型架构之后,使用一行代码,你可以编译和拟合模型.之后,它可以用于预测.变量声明.占位 ...
- numpy.stack和numpy.concatenate的区别
在使用numpy进行矩阵运算的时候踩到的坑,原因是不能正确区分numpy.concatenate和numpy.stack在功能上的差异. 先说numpy.concatenate,直接看文档: nump ...
- java 拦截器解决xss攻击
一.xss攻击 XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序.这些恶意网页程序通常是JavaScript,但实际上也 ...
- .Net Core基础的健康检查
前言 健康检查能查看我们的应用程序当前是否是一个健康的运行状态.微软已经给我们提供了健康检查轮子,只需要简单的配置就能完成服务的状态检查.一起来实现一个最简单的健康检查吧. 开始 新建一个空的webA ...
- HTML中doctype的作用及几种类型详解
一.DOCTYPE标签的定义与作用 <!DOCTYPE>是一个用于声明当前HTMl版本,用来告知web浏览器该文档使用是哪种 HTML 或者 XHTML 规范来解析页面,以便浏览器更加准确 ...