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 ...
随机推荐
- springboot之JWT实现权限认证
1.在pom.xml添加依赖 <dependency> <groupId>com.auth0</groupId> <artifactId>java-jw ...
- Delphi实现树型结构具体实例
unit Unit1;interfaceuses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...
- 在谷歌中缓存下载视频离线观看,js代码
var download=function(urlInfo) { when(createFile(localFileName)) .then(function (fileInfo) { var dow ...
- Vuforia笔记1(Vuforia8.0.10与Unity2018.3.6f1)
一丶ARCamera(AR的灵魂) 1.World Center Mode SPECIFIC_TARGET:制定一个物体作为世界中心坐标 FIRST_TARGET:摄像机所照射到的第一个需要识别的目标 ...
- skywalking 的安装部署及其远程应用
环境配置 centos 7.6 jdk 1.8 elasticsearch5.6.8 skyWalking3.2.6 1.安装elasticsearch wget https://artifacts. ...
- 攻防世界MISC新手练习
0x01 this_is_flag 对!!!这就是flag 0x02 ext3 题目提示是Linux光盘,附件下载下来 在linux中挂载mount linux /mnt 找一下flagtrings ...
- JavaScript 短路值
了解表达式中的短路值. 逻辑运算从左到右.逻辑或运算,当左边的条件成立时,后面的条件将不再参与运算.因此在逻辑或运算中,尽量将条件结果为true的放第一位.而在逻辑与运算中,尽量将条件结果为false ...
- jq+js获取到table标签中的value
前端jsp页面,(这里接收后端的参数方式没有放在上面) <table> <tbody id="fPzQwQwzbrList"> <tr id=&quo ...
- LOJ #10131 「一本通 4.4 例 2」暗的连锁
LOJ #10131 「一本通 4.4 例 2」暗的连锁 给一棵 \(n\) 个点的树加上 \(m\) 条非树边 , 现在需要断开一条树边和一条非树边使得图不连通 , 求方案数 . $n \le 10 ...
- Django2.2连接mysql数据库出现django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.3 or newer is required; you have 0.7.11.None问题
在使用Django2.2开发的时候,想要使用mysql数据库,在settings.py文件中更改命令: DATABASES = { 'default': { 'ENGINE': 'django.db. ...