【HTML】WebStorage
WebStorage
2019-11-13 10:46:18 by冲冲
1. 概况
- 早期浏览器的本地存储使用cookie,当前推荐使用Web Storage。
- Web Storage的数据以"键/值对"存在,Web网页的数据只允许该网页访问使用。
2. 浏览器支持
- Internet Explorer 7 及更早IE版本不支持Storage。
- IE8+、FireFox、Opera、Chrome、Safari已经支持Storage。
- 使用storage之前,应该检查浏览器是否支持Storage。
1 if(typeof(Storage)!=="undefined")
2 {
3 // 支持localStorage和sessionStorage对象
4 // 业务代码.....
5 } else {
6 // 不支持web存储
7 }
3. Storage分类
- localStorage:用于长期保存该网站的数据,数据的存储时间没有限制,直到手动去除。
- sessionStorage:用于临时保存该网站的数据,在关闭窗口或标签页之后将会删除这些数据。
4. Storage作用域
作用域:隔离开不同页面之间的localStorage(例如:百度页面不能读到腾讯页面的localStorage)。
- localStorage作用域:相同的协议、相同的主机名、相同的端口。
- sessionStorage作用域:相同的协议、相同的主机名、相同的端口、相同窗口/浏览器标签页。
5. API
localStorage和sessionStorage使用的API相同,常用的有(以localStorage为例)
① 保存数据:localStorage.setItem(key,value);
② 读取数据:localStorage.getItem(key);
③ 删除单个数据:localStorage.removeItem(key);
④ 删除所有数据:localStorage.clear();
⑤ 得到某个索引的key:localStorage.key(index);
1 // 存储
2 localStorage.sitename = "菜鸟教程";
3 // 查找
4 document.getElementById("result").innerHTML = localStorage.sitename;
5 // 移除
6 localStorage.removeItem("sitename");
6. 数据类型
键/值对通常以字符串存储,可以按需要转换数据类型。
1 // 该实例展示用户点击按钮的次数,期望将代码中的字符串值转换为数字类型
2 if (localStorage.clickcount)
3 {
4 localStorage.clickcount=Number(localStorage.clickcount)+1;
5 }
6 else
7 {
8 localStorage.clickcount=1;
9 }
10 document.getElementById("result").innerHTML=" 你已经点击按钮 " + localStorage.clickcount + " 次 ";
7. sessionStorage
sessionStorage方法针对一个session进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
1 if (sessionStorage.clickcount)
2 {
3 sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
4 }
5 else
6 {
7 sessionStorage.clickcount=1;
8 }
9 document.getElementById("result").innerHTML="在这个会话中你已经点击该按钮 " + sessionStorage.clickcount + " 次 ";
8. 应用实例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>HTML5本地存储之WebStorage</title>
6 </head>
7 <body>
8 <div style="border: 2px dashed #ccc;width:320px;text-align:left;">
9 <label for="keyname">别名(key):</label>
10 <input type="text" id="keyname" name="keyname" class="text"/>
11 <br/>
12 <label for="sitename">网站名:</label>
13 <input type="text" id="sitename" name="sitename" class="text"/>
14 <br/>
15 <label for="siteurl">网 址:</label>
16 <input type="text" id="siteurl" name="siteurl"/>
17 <br/>
18 <input type="button" onclick="save()" value="新增记录"/>
19 <hr/>
20 <label for="search_phone">输入别名(key):</label>
21 <input type="text" id="search_site" name="search_site"/>
22 <input type="button" onclick="find()" value="查找网站"/>
23 <p id="find_result"><br/></p>
24 </div>
25 <br/>
26 <div id="list">
27 </div>
28 <script>
29 //保存数据
30 function save(){
31 var site = new Object;
32 site.keyname = document.getElementById("keyname").value;
33 site.sitename = document.getElementById("sitename").value;
34 site.siteurl = document.getElementById("siteurl").value;
35 var str = JSON.stringify(site); // 将对象转换为字符串
36 localStorage.setItem(site.keyname,str);
37 alert("保存成功");
38 }
39 //查找数据
40 function find(){
41 var search_site = document.getElementById("search_site").value;
42 var str = localStorage.getItem(search_site);
43 var find_result = document.getElementById("find_result");
44 var site = JSON.parse(str);
45 find_result.innerHTML = search_site + "的网站名是:" + site.sitename + ",网址是:" + site.siteurl;
46 }
47
48 //将所有存储在localStorage中的对象提取出来,并展现到界面上
49 //确保存储的 keyname 对应的值为转换对象,否则JSON.parse会报错
50 function loadAll(){
51 var list = document.getElementById("list");
52 if(localStorage.length>0){
53 var result = "<table border='1'>";
54 result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";
55 for(var i=0;i<localStorage.length;i++){
56 var keyname = localStorage.key(i);
57 var str = localStorage.getItem(keyname);
58 var site = JSON.parse(str);
59 result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>";
60 }
61 result += "</table>";
62 list.innerHTML = result;
63 }else{
64 list.innerHTML = "数据为空...";
65 }
66 }
67 </script>
68 </body>
69 </html>
参考:https://www.runoob.com/html/html5-webstorage.html
【HTML】WebStorage的更多相关文章
- Python高手之路【六】python基础之字符串格式化
Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...
- 【原】谈谈对Objective-C中代理模式的误解
[原]谈谈对Objective-C中代理模式的误解 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...
- 【原】FMDB源码阅读(三)
[原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...
- 【原】Android热更新开源项目Tinker源码解析系列之一:Dex热更新
[原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...
- 【调侃】IOC前世今生
前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...
- Python高手之路【三】python基础之函数
基本数据类型补充: set 是一个无序且不重复的元素集合 class set(object): """ set() -> new empty set object ...
- Python高手之路【一】初识python
Python简介 1:Python的创始人 Python (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种解释型.面向对象.动态数据类型的高级程序设计语言,由荷兰人Guido ...
- 【开源】简单4步搞定QQ登录,无需什么代码功底【无语言界限】
说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/LoTQQLogin ————————— ...
- 【原】FMDB源码阅读(二)
[原]FMDB源码阅读(二) 本文转载请注明出处 -- polobymulberry-博客园 1. 前言 上一篇只是简单地过了一下FMDB一个简单例子的基本流程,并没有涉及到FMDB的所有方方面面,比 ...
随机推荐
- 前段之jQuery
一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...
- 深入理解Java虚拟机之垃圾回收篇
垃圾回收简介 Java 会对内存进行自动分配与回收管理,使上层业务更加安全,方便地使用内存实现程序逻辑.在不同的 JVM 实现及不同的回收机制中,堆内存的划分方式是不一样的. 简要地介绍下垃圾 ...
- 利用 CSS Overview 面板重构优化你的网站
本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel,并且介绍如何更好地利用这个面板.通过 CSS Overview Panel,可能可以帮助我们: 更准确(高保真) ...
- 深度剖析Redis6的持久化机制(大量图片说明,简洁易懂)
Redis的强劲性能很大程度上是由于它所有的数据都存储在内存中,当然如果redis重启或者服务器故障导致redis重启,所有存储在内存中的数据就会丢失.但是在某些情况下,我们希望Redis在重启后能够 ...
- Scrum Meeting 0607
零.说明 日期:2021-6-7 任务:简要汇报两日内已完成任务,计划后两日完成任务 一.进度情况 组员 负责 两日内已完成的任务 后两日计划完成的任务 困难 qsy PM&前端 重新设计产品 ...
- NodeJs安装与环境配置
https://blog.csdn.net/qq_43285335/article/details/90696126 https://www.cnblogs.com/liuqiyun/p/813390 ...
- 『学了就忘』Linux基础 — 10、VMware虚拟机中克隆的使用
目录 1.什么是克隆 2.克隆的两种类型 (1)完整克隆 (2)链接克隆 3.克隆操作 步骤一:克隆虚拟机 步骤二:进行克隆导向 3.快照与克隆的区别 4.镜像的管理 快照和克隆是VMware中两个非 ...
- web性能检测工具lighthouse
About Automated auditing, performance metrics, and best practices for the web. Lighthouse 可以自动检查Web页 ...
- linux下软链接文件的拷贝
最近在编译libnl库准备拷贝到其他机器中使用的时候出现无法拷贝问题,原因是sd卡是fat32文件系统格式,这种文件系统不支持linux下的ln软链接文件, void@void-ThinkPad-E4 ...
- 把字符串转换成整数 牛客网 剑指Offer
把字符串转换成整数 牛客网 剑指Offer 题目描述 将一个字符串转换成一个整数(实现Integer.valueOf(string)的功能,但是string不符合数字要求时返回0),要求不能使用字符串 ...