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由每个对服务器的请求来传递,会影 ...
随机推荐
- Java实现行列递增矩阵的查找
1 问题描述 在一个m行n列的二维数组中,每一行都按照从左到右递增的顺序排列,每一列都按照从上到下递增的顺序排列.现在输入这样的一个二维数组和一个整数,请完成一个函数,判断数组中是否含有该整数. 2 ...
- Java实现第八届蓝桥杯取数位
取数位 求1个整数的第k位数字有很多种方法. 以下的方法就是一种. 还有一个答案:f(x/10,k--) public class Main { static int len(int x){ // 返 ...
- 简谈Java语言的继承
Java语言的继承 这里简谈Java语言的三大特性之二——继承. Java语言的三大特性是循序渐进的.是有顺序性的,应该按照封装-->继承-->多态这样的顺序依次学习 继承的定义 百度百科 ...
- 异步函数async await在wpf都做了什么？
首先我们来看一段控制台应用代码: class Program { static async Task Main(string[] args) { System.Console.WriteLine($& ...
- PostgreSQL常用脚本整理
1.序列 以自增serial类型主键的序列: alter sequence s_seq restart with 1; #重置序列select currval('tablename_pid_seq') ...
- 深度学习在高德ETA应用的探索与实践
1.导读 驾车导航是数字地图的核心用户场景,用户在进行导航规划时,高德地图会提供给用户3条路线选择,由用户根据自身情况来决定按照哪条路线行驶. 同时各路线的ETA(estimated time of ...
- c常用函数-strcpy和strncpy
strcpy和strncpy strcpy在脚本开发中经常用到,例如处理参数等,它的作用是把一个字符串复制到另一个字符串中. strncpy的作用是把一个字符串中的指定长度复制到另一个字符串中,如果指 ...
- 密码学数论基础部分总结之 有限域GF(p) Galois Fields
今天花了一下午的时间学习密码学的数论部分,下面将学到的内容进行一下总结,也算是加深记忆.我本身对密码学这方面比较感兴趣,而且本节出现了许多数学公式,使用刚刚学习的LaTex公式来呈现出来,练习练习,何 ...
- centos7搭建EFK
环境: system: CentOS Linux release 7.7.1908 elasticsearch: elasticsearch-7.5.1-1.x86_64 kibana: kibana ...
- 1、安装配置Git私有服务器
安装并配置一个私有的Git服务器吧,这样自己的代码就可以进行版本控制了,当然版本控制的重要性嘛,Please Baidu. 系统环境:64位Win10 Version 1909 安装步骤: 1.下载j ...