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由每个对服务器的请求来传递,会影 ...
随机推荐
- PAT 旧键盘
旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 2 行中分别给出应该输入的文字.以及 ...
- CORS跨域漏洞学习
简介 网站如果存CORS跨域漏洞就会有用户敏感数据被窃取的风险. 跨域资源共享(CORS)是一种浏览器机制,可实现对位于给定域外部的资源的受控访问.它扩展了同源策略(SOP)并增加了灵活性.但是,如果 ...
- Ubuntu安装protobuf步骤
1.从谷歌官网获取源码 protobuf-2.4.1.tar.gz 2.解压 tar -zxvf protobuf-2.4.1.tar.gz 3.配置 ./configure 4.编译 make 5. ...
- yii2中的场景使用
下面给大家介绍一下 yii2.0 场景的使用.小伙多唠叨一下了,就是担心有的人还不知道,举个简单的例子,现在在 post表里面有 title image content 三个的字段,当我创建一个 po ...
- Excel常用公式大全
公式是单个或多个函数的结合运用. AND “与”运算,返回逻辑值,仅当有参数的结果均为逻辑“真(TRUE)”时返回逻辑“真(TRUE)”,反之返回逻辑“假(FALSE)”. 条件判断 AVERAGE ...
- 刷一遍《剑指Offer》,你还需要这些知识！（一刷）
因为时间紧和基础薄弱,一刷<剑指Offer>就变成了速看. 我按照: 1.看题目思考一会: 2.上网找找关于题目里不懂的知识点: 3.看评论和官方题解的解法,尽量看懂,并及时弄懂不懂的地方 ...
- CKAD个人考试心得
先晒一波本人的CKA和CKAD证书! 如下正式分享CKAD心得: 考试相关准备: l 练习:https://github.com/dgkanatsios/CKAD-exercises: l 网络:必须 ...
- MAC App破解之路十 Particle Design
这个软件破解非常简单: 修改: [PaddleStatic Yz6nrtNwF4].直接返回1 效果:
- 基于web网站项目的性能测试结果分析
业务背景: 最近公司研发了一款对并发要求比较高的web项目,需要对其压力测试,模拟线上可能存在的问题,这个过程中遇到一些很多问题,这里重新梳理一下思路,希望能给遇到同样问题的小伙伴提供一个参考. 工具 ...
- Linux性能优化思路
性能测试的核心,就是找出性能瓶颈并进行性能优化,解决"慢"的问题,最终满足客户业务需求. [性能需求来源及性能问题现象] 性能需求的来源,主要分为以下几类: 项目组提出性能需求: ...