web储存的初级运用
<html>
<head>
<meta charset="utf-8">
<title>web存储</title>
</head>
<body>
<p id="result"></p>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">网 址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_site">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<script>
//web储存主要利用Storage对象及IndexedDataBase API(web SQL DB 已废弃)
//ps:localStorage是Storage的实例
// globalStorage不是Storage的实例,globalStorage(location.host)才是
// sessionStorage只适合短暂的会话储存而不适合长期的存储，
// 长期存储可采用localStorage
//判断是否支持
if (typeof (Storage) !== "undefined") {
console.log("支持");
} else {
console.log("don't work");
}
//localStorage储存无时间限制
localStorage.sitename = "逗趣";//利用属性保存
document.querySelector("#result").innerHTML = `网站名:${localStorage.sitename}`;
localStorage.setItem("sitename",1);//利用方法保存
localStorage.setItem("sitename2",6);
console.log(localStorage.sitename);
localStorage.removeItem("sitename");//方法移除，也可利用属性移除
console.log(localStorage.sitename);
var name = localStorage.key(2);//索引
console.log(name);
//保存数据
function save() {
var siteurl = document.getElementById("siteurl").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find() {
var search_site = document.getElementById("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}
</script>
</body>
</html>
web储存的初级运用的更多相关文章
- HTML5 的web储存: localStorage & sessionStorage
早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...
- shellKali Linux Web 渗透测试— 初级教程（第三课）
shellKali Linux Web 渗透测试— 初级教程(第三课) 文/玄魂 目录 shellKali Linux Web 渗透测试—初级教程(第三课) 课程目录 通过google hack寻找测 ...
- 1+x 证书 Web 前端开发初级理论考试（试卷8 ）
Web前端开发初级模拟测试卷(三) 共55道题 总分:200分 形考总分:0分 一.单选题共30题,60分 1.实现向右的红色三角形,样式实现正确的是( ) A <div class=" ...
- 1+x 证书 web 前端开发初级对应课程分析
响应国家号召 1+X 证书 Web 前端开发考试样题 官方QQ群 1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/19 ...
- 1+x证书Web 前端开发初级——理论考试（试卷1）
1+x证书Web 前端开发初级——理论考试(试卷1) 一.单选题(每小题 2 分,共 30 小题,共 60 分) 1.HTML 语言中,设置表格中文字与边框距离的标签是() A.<table b ...
- web前端开发初级
Web 页面制作基础 Web 的相关概念 WWWWebsiteURLWeb StandardWeb BrowserWeb Server HTML 基础 标记语言从 HTML 到 XHTMLHTML 的 ...
- 一个简单的js计数器(web储存)。
<span id="countspan"></span> <a href="#" onclick="countNumbe ...
- web储存用户信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
随机推荐
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_06-vuejs研究-vuejs基础-v-on指令
3.v-on绑定一个按钮的单击事件 计算的按钮上加事件 点击计算的按钮,弹出的事件 定义一个Result的变量
- JavaScript 异步和单线程
JavaScript语言本身是单线程的,所以它自身不可能是异步.所谓单线程,就必然意味着:所有任务需要排队,前一个任务结束,才会执行后一个任务. 但js的宿主环境(比如浏览器,Node)是多线程的.宿 ...
- HBase管理与监控——Dead Region Servers
[问题描述] 在持续批量写入HBase的情况下,出现了Dead Region Servers的情况.集群会把dead掉节点上的region自动分发到另外2个节点上,集群还能继续运行,只是少了1个节点. ...
- Data - 数据挖掘的基础概念
主要内容来自于<微信公众号:程SIR说> 1 数据挖掘 数据挖掘(Data Mining,简称DM),是指从大量的数据中,挖掘出未知的且有价值的信息和知识的过程. 数据挖掘是一门交叉学科, ...
- swift 第十二课 as 的使用方法
忽略的基础性的问题,应该早点写出这个问题的解释比较好,毕竟 swift 好多的地方都用到了 as as!as?,是非常容易搞晕大脑的 1,as使用场合 (1)从派生类转换为基类,向上 ...
- NDK学习笔记-多线程与生产消费模式
在做NDK开发的时候,很多情况下都是需要使用多线程的,一方面是提高程序运行效率,另一方面就是防止主线程阻塞 C的多线程 在C语言里,可以通过对于POSIX标准的运用,使得C语言执行多线程 提高程序的执 ...
- Java学习笔记-包装类
基本数据类型对象包装类的最常见作用,就是用于基本数据类型和字符串类型之间做转换 包装类的由来 为了解决8种基本数据类型的变量不能当成Object类型变量使用的问题,Java提供了包装类(Wrapper ...
- U盘自动复制文件
1.建立一个文本文档,WIN+R 里面打NOTEPAD ,或者自己新建一个都一样. 2.把下面的代码复制进去 set fso=createobject("scripting.filesyst ...
- mui ajax提交问题点
<script type="text/javascript" charset="utf-8"> mui.init(); mui.ajax(__tes ...
- GDB获取帮助信息
用help 功能,你可以获得GDB 的命令信息. helph 你可以用help(缩写h)不带参数来显示一个命令分类的简短列表. (gdb) help List of classes of comman ...