快速理解webStroage
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<fieldset id="">
<legend>sessionStorage</legend>
<input type="text" name="" id="txt1" value="" />
<br />
<input type="button" name="save1" id="save1" value="保存数据" />
<input type="button" name="get1" id="get1" value="读取数据" />
<input type="button" name="del1" id="del1" value="删除数据" />
</fieldset>
<fieldset id="">
<legend>localStorage</legend>
<input type="text" name="" id="txt2" value="" />
<br />
<input type="button" name="save2" id="save2" value="保存数据" />
<input type="button" name="get2" id="get2" value="读取数据" />
<input type="button" name="del2" id="del2" value="删除数据" />
</fieldset>
</body>
<script type="text/javascript"> document.getElementById("save1").onclick = function(){
var sinput = document.getElementById("txt1").value;
sessionStorage.setItem("session1",sinput);
}
document.getElementById("get1").onclick = function(){
var con = sessionStorage.getItem("session1");
var str = document.createElement("span");
str.innerHTML = con;
document.getElementsByTagName("fieldset")[0].appendChild(str);
}
document.getElementById("del1").onclick = function(){
sessionStorage.removeItem("session1");
document.getElementsByTagName("fieldset")[0].getElementsByTagName("span")[0].innerHTML=""
} document.getElementById("save2").onclick = function(){
var sinput = document.getElementById("txt2").value;
localStorage.setItem("local1",sinput);
}
document.getElementById("get2").onclick = function(){
var con = localStorage.getItem("local1");
var str = document.createElement("span");
str.innerHTML = con;
document.getElementsByTagName("fieldset")[1].appendChild(str);
}
document.getElementById("del2").onclick = function(){
localStorage.removeItem("local1");
document.getElementsByTagName("fieldset")[1].getElementsByTagName("span")[0].innerHTML=""
} </script>
</html>
Web Storage功能，就是在Web上存储数据，分为两种：
sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到该网站所有域名被关闭所经过的这段时间，session对象可用来保存在这段时间内所要求保存的任何数据
localStorage：将数据保存在客户端本地的硬件设备中，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站时仍然可用
区别：sessionStorage为临时保存，localStorage为永久保存。
HTML5中提供了localStorage对象可以将数据长期保存在客户端，直到人为清除。localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)
如果key存在时，更新value
2、获取：localStorage.getItem(key)
如果key不存在返回null
3、删除：localStorage.removeItem(key)
一旦删除，key对应的数据将会全部删除
4、全部清除：localStorage.clear()
某些时候使用removeItem逐个删除太麻烦，可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量，例：localStorage.length
.key(index) 获取key，例：var key=localStorage.key(index);
6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的串
JSON.parse(data) 将数据解析成对象，返回解析后的对象。
sessionStroage的用法和localStroage的用法一样，在存储数据的过程中，所有数据全部以字符串类型保存。
存取对象时用Json.stringfy()方法将对象转换成字符串
var str = {
age:12,
name:"sa"
}
str=JSON.stringify(str);
localStorage.setItem("obj",str);
将字符串转换成对象用JSON.parse()方法
console.log(JSON.parse(localStorage.getItem("obj")))
快速理解webStroage的更多相关文章
- 【转】快速理解Kafka分布式消息队列框架
from:http://blog.csdn.net/colorant/article/details/12081909 快速理解Kafka分布式消息队列框架 标签: kafkamessage que ...
- Spark机器学习 Day2 快速理解机器学习
Spark机器学习 Day2 快速理解机器学习 有两个问题: 机器学习到底是什么. 大数据机器学习到底是什么. 机器学习到底是什么 人正常思维的过程是根据历史经验得出一定的规律,然后在当前情况下根据这 ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- 快速理解高性能HTTP服务端的负载均衡技术原理(转)
1.前言 在一个典型的高并发.大用户量的Web互联网系统的架构设计中,对HTTP集群的负载均衡设计是作为高性能系统优化环节中必不可少的方案.HTTP负载均衡的本质上是将Web用户流量进行均衡减压,因此 ...
- 脑残式网络编程入门(四)：快速理解HTTP/2的服务器推送(Server Push)
本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...
- 字符编码那点事：快速理解ASCII、Unicode、GBK和UTF-8
原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享. 1.引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料. 这个问题比我想象 ...
- [转帖]十分钟快速理解DPI和PPI，不再傻傻分不清！
十分钟快速理解DPI和PPI,不再傻傻分不清! https://baijiahao.baidu.com/s?id=1605834796518990333&wfr=spider&for= ...
- 快速理解VirtualBox的四种网络连接方式
VirtualBox中有4中网络连接方式: NAT Bridged Adapter Internal Host-only Adapter VMWare中有三种,其实他跟VMWare 的网络连接方式都是 ...
- 深入浅出 1 - AI量化策略快速理解
我们在用AI来编写量化策略过程中,主要用到了机器学习,先来从一张图直观理解什么是机器学习:人类对新问题做出有效决策依靠的是过去积累的许多经验,并对经验进行利用,而对机器来说,“经验”以“数据”方式 ...
随机推荐
- 微信开发第8章 通过accesstoken将长连接转换为短链接
业务场景:开发的过程中经常会有一些很长的链接,这个时候如果生成二维码,会导致扫码的过程中识别比较慢,如果存入数据库,会导致数据库的字段长度要设定的很长才行,所以把长连接转换为短链接就越来越重要了. 接 ...
- ABAP多表关联查询
inner join(等值连接) 只返回两个表中联结字段相等的行 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有 ...
- ThinkPad New X1 Carbon中关闭任务栏上的触摸键盘
1. 执行services.msc 2. 选择Touch Keyboard and Handwriting Panel 服务. 3. 将其停止执行. 并disable.
- Unix/Linux环境C编程新手教程(12) openSUSECCPP以及Linux内核驱动开发环境搭建
1. openSUSE是一款优秀的linux. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRjYXN0Y3Bw/font/5a6L5L2T/font ...
- ActionBarSherlock
https://github.com/JakeWharton/ActionBarSherlock https://github.com/ddewaele/GoogleMapsV2WithActionB ...
- 利用mongodb开发lbs应用实践【转】
近期作为突击队员,与同事一起突击构建了一个简单的lbs系统.当前比较主流的做法是使用mongodb,因为其已经封装了常用的lbs基本操作(如查找附近的人),功能非常强大,对于开发周期只有一周的项目,m ...
- Linux 内核进程管理之进程ID 。图解
http://www.cnblogs.com/hazir/tag/kernel/ Linux 内核进程管理之进程ID Linux 内核使用 task_struct 数据结构来关联所有与进程有关的数 ...
- 深入理解计算机系统第二版习题解答CSAPP 2.6
使用打印字节的方式可以知道十进制数12345的十六进制为0x00003039,十进制浮点数12345.0的十六进制为0x4640E400. 转换为二进制为 /* 0 0 0 0 3 0 3 9 *** ...
- haproxy部署及配置
HAProxy介绍 (1)HAProxy 是一款提供高可用性.负载均衡以及基于TCP(第四层)和HTTP(第七层)应用的代理软件,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProxy特 ...
- 第十篇：web之前端之django一些feature
前端之django一些feature 前端之django一些feature 本节内容 cookie session 跨站请求保护 分页 序列化 model模块 CBV和FBV 模板渲染对象 1. ...