HTML5新增web存储方式
客户端存储数据的两个对象为:
两个对象在使用方式没有任何区别,唯一的不同点蚀储存数据 的有效时间
①localStorage - 没有时间限制的数据存储 除非手动删除,否则数据将一直保存在本地文件;
②sessionStorage - 针对一个 session 的数据存储 当浏览器关闭时,sessionStorage就被清空;
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
[Storage的数据存储]
1、Storage可以像普通对象一样,使用.追加或者读取最新的数据。
eg:localStorage.username="张三";
2、常用的函数
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
检测浏览器是否支持web存储
if(typeof(Storage)!=="undefined"){
alert("支持") ; } else {
alert("不支持") }
怎样新增一条数据?
1、 取到录入的各种信息
2、 把这些信息封装成一个对象。
3、 从本地文件中,读取出存储数据的数组字符串。并将字符串,转回数组格式。
如果本地文件中,没有这个数组,就新建一个数组存放。
4、 数组中,push进一个新组建的对象。
5、 将新数组,重新转为字符串。把字符串丢回文件。
6、 重新读取一边文件,重新加载表格。
怎样新增一条数据?
1、 从文件中,读取出字符串,转回数组格式。
2、 判断需要删除的是第几条数据。
3、 删除掉数组对应的数据、splice
4、 把新数组重新转为字符串,放回文件。
5、 重新读取一边文件,重新加载表格。
例如:
<h4>新增网站</h4>
网站名:<input type="text" id="wangzhanming"/><br />
别名: <input type="text" id="bieming"/><br />
网址:<input type="text" id="wangzhi"/><br />
<input type="button" value="新增网站" onclick="addSite()"/><br />
<!--<input type="button" value="新增网站" onclick="showDia()" />-->
<h4>网站登录</h4>
网站名:<input type="text" id="loginName"/><br />
网址:<input type="text" id="loginPwd"/><br />
<input type="button" value="登录网站" onclick="login()"/><br /> <h4>已保存的网站</h4>
<input type="button" value="删除网站" onclick="delSite()" />
<input type="text" placeholder="网站名" id="search1"/>
<input type="text" placeholder="别名" id="search2"/>
<input type="text" placeholder="网址" id="search3"/>
<input type="button" value="查询" onclick="searchSite()" /> <table style="border-collapse: collapse;" border=;>
<thead>
<th>
<input type="checkbox" id="checkAll" onclick="checkAll()" />
</th>
<th>序号</th>
<th>网站名</th>
<th>别名</th>
<th>网址</th>
</thead>
<tbody id="tbody"> </tbody>
</table>
/*注册*/
function addSite(){ var wangzhanming = document.getElementById("wangzhanming").value;
var bieming = document.getElementById("bieming").value;
var wangzhi = document.getElementById("wangzhi").value;
var site = {
wangzhanming : wangzhanming,
bieming : bieming,
wangzhi : wangzhi
}
if(localStorage.sites == undefined){
var arr = [];
}else{
var str = localStorage.sites;
var arr = JSON.parse(str);
}
for(var i=; i<arr.length; i++){
if(arr[i].wangzhanming == wangzhanming){
alert("网站名已注册!请更换网站名!");return;
}
}
arr.push(site);
var str = JSON.stringify(arr);
localStorage.sites = str; alert("新增成功!!");
showAllSite();
}
/**
* 显示所有的网站列表
*/
function showAllSite(){
if(localStorage.sites == undefined) return;
var str = localStorage.sites;
var arr = JSON.parse(str);
var html = "";
arr.forEach(function(item,index){
html += "<tr class='tr' onclick='chooseInput("+index+")'ondblclick='updateSite("+item.index+")'><td align='center'><input type='checkbox' value='"+index+"' class='checkbox' /></td><td>"+(index+)+"</td><td>"
+item.wangzhanming+"</td><td>"+item.bieming+"</td><td>"+item.wangzhi+"</td></tr>";
}); var tbody = document.getElementById("tbody");
tbody.innerHTML = html;
}
window.onload = function(){
showAllSite();
} /*删除选中的网站*/
function delSite(){
var checkboxs =document.getElementsByClassName("checkbox");
var count=;
var str = localStorage.sites;
var arr = JSON.parse(str); for(var i=;i<checkboxs.length;i++){
if(checkboxs[i].checked){ var index =parseInt(checkboxs[i].value)-count;
arr.splice(index,);
count++;
}
}
localStorage.sites =JSON.stringify(arr);
if(count==){
alert("请至少选择一项!!")
}else{
alert("删除成功!共删除"+count+"条数据!");
showAllSite();
} }
HTML5新增web存储方式的更多相关文章
- js Web存储方式
JSON是数据交互中最常用的一种数据格式. 由于各种语言的语法都不同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串> 传递之后,可以讲JSON字符串,在解析为JSON对象. ...
- HTML5中Web存储
HTML5 中web存储是一个比cookies更好的一个本地存储方式. 那么什么是HTML5存储呢? 使用HTML5可以在本地存储用户浏览的数据,HTML5技术没有出来之前是使用cookies进行本地 ...
- 介绍HTML5几种存储方式
总体情况 h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k ...
- web 存储方式汇总:Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application Cache,Cache Storage
1 1 1 web 存储方式汇总: 旧的方式: Cookies; Session; Web SQL; 新的方式 HTML5 : Web Storage(LocalStorage ,SessionSto ...
- 前端HTML5几种存储方式的总结
接下来要好好总结一些知识,秋招来啦...虽然有好多知识都不大会,但是还是要努力一下,运气这种东西,谁知道呢~ 总体情况 h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大 ...
- 【我的前端自学之路】【HTML5】web 存储
以下为自学笔记内容,仅供参考. 转发请保留原文链接:https://www.cnblogs.com/it-dennis/p/10503539.html 什么是Web存储 cookie最大的缺陷是在每一 ...
- html5的web存储详解
以前我们在本地存储数据都是用document.cookie来存储的,但是由于其的存储大小只有4K左右,解析也很复杂,给开发带来了诸多的不便.不过现在html5出了web的存储,弥补了cookie的不足 ...
- html5的web存储
在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...
- 【html5】Web存储_locaStorage对象的应用
Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...
随机推荐
- MySQL xtrabackup之--databases 勿手贱
xtrabackup备份单库时,必须指定--databases,但是如果将databases写成了database,那么xtrabackup备份的就是整个数据库,以下是 uuid = 397ae42e ...
- Unity 使用xLua遇到的坑
在我们使用xLua作为Unity中lua集成的解决方案时,遇到了一个问题,就是当我们使用在lua中把UI中的某个控件绑定相应的事件(如按钮的onClick事件),xLua绑定这个事件是用委托实现的,具 ...
- 线程池ThreadPoolExecutor与阻塞队列BlockingQueue应用
1.线程池介绍 JDK5.0以上: java.util.concurrent.ThreadPoolExecutor 构造函数签名: public ThreadPoolExecutor( int co ...
- JavaScript原型及继承
一.浅谈原型 首先我们要知道创建对象的方法有两种: 1.通过字面量的方式直接创建 var obj = { name:'baimao', age:21 } 2.通过构造函数创建对象 function P ...
- 前端到后台ThinkPHP开发整站(完)
久违了,今天终于抽空把最后的写完了,这是这个项目的最后一篇文章了,把前台的栏目控制器和文章内容控制器的功能实现了. 栏目控制器: <?php namespace Home\Controller; ...
- JavaScript操作cookie基础分析
简要介绍 cookie是什么cookie是HTTP协议的一部分.HTTP Cookie(也叫Web cookie或者浏览器Cookie)是服务器发送到用户浏览器并保存在浏览器上的一块数据,它会在浏览器 ...
- 化工厂装箱员 洛谷 p2530
题目描述 118号工厂是世界唯一秘密提炼锎的化工厂,由于提炼锎的难度非常高,技术不是十分完善,所以工厂生产的锎成品可能会有3种不同的纯度,A:100%,B:1%,C:0.01%,为了出售方便,必须 ...
- CSS规范--春风十里不如写好CSS
先吟几句: 最近看了看春风十里不如你,本来很少看剧的,暑假有点闲就看了,感觉不错,挺喜欢这部剧,就套了个名字,嘿嘿嘿.剧里面印象深刻的是<致橡树>这首诗,念几句: 我如果爱你,绝不像攀援的 ...
- VMvare 虚拟网卡vmnet1 and vmnet8
VMvare 虚拟网卡vmnet1 and vmnet8---------------------------------2013/11/03 在使用VMware Workstation创建虚拟机时, ...
- Oracle外键需要建索引吗?
关于Oracle中的外键,首先要说明一下. 1. 除非已定义了父表主键或唯一键约束,否则oracle将不允许创建子表的外键约束. 2. 在定义外键约束时,oracle不会自动创建索引,所以必须手动在与 ...