Web存储使用详解（本地存储、会话存储）
Web存储使用详解（本地存储、会话存储）
1，Web存储介绍
HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种：
（1）本地存储，对应 localStorage 对象。用于长期保存网站的数据，并且站内任何页面都可以访问该数据。
（2）会话存储，对应 sessionStorage 对象。用于临时保存针对一个窗口（或标签页）的数据。在访客关闭窗口或者标签页之前，这些数据是存在的，而关闭之后就会被浏览器删除。
2，本地存储与会话存储的异同
（1）本地存储和会话存储的操作代码完全相同，它们的区别仅在于数据的寿命。
（2）本地存储主要用来保存访客将来还能看到的数据。
（3）会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
3，Web存储容量限制
大多数浏览器都把本地存储限制为 5MB 以下。这个是和网站所在的域联系在一起的。
4，Web存储的使用样例
下面以本地存储（localStorage）为例，会话存储改成 sessionStorage 对象即可。
（1）文本数据的保存和读取
1
2
3
localStorage.setItem("user_name","hangge.com");
var userName = localStorage.getItem("user_name");
（2）数值的保存和读取
1
localStorage.setItem("user_age",100);
var userAge = Number(localStorage.getItem("user_age"));
（3）日期的保存和读取
1
//创建日期对象
var today = new Date();
//按照YYY/MM/DD的标准格式把日期转换成文本字符串，然后保存为文本
var todayString = today.getFullYear() + "/" + today.getMonth() + "/" + today.getDate();
localStorage.setItem("session_started", todayString);
//取得日期文本，并基于该文本创建新的日期对象
var newToday = new Date(localStorage.getItem("session_started"));
alert(newToday.getFullYear());
（4）自定义对象的保存和读取
对象的保存和读取可以通过JSON编码转换来实现。
JSON.stringify()：把任何对象连同其数据转换为文本形似。
JSON.parse()：把文本转换回对象。
1
//自定义一个User对象
function User(n, a, t) {
this.name = n;
this.age = a;
this.telephone = t;
}
//创建User对象
var user = new User("hangge", 100, "123456");
//将其保存为方便的JSON格式
sessionStorage.setItem("user", JSON.stringify(user));
//跳转页面
//window.location = "hangge.html";
//将JSON文本转回原来的对象
var user2 = JSON.parse(sessionStorage.getItem("user"));
alert(user2.name);
（5）检测某个键的值是否为空，可以直接测试是否等于null
1
3
if(localStorage.getItem("user_name") == null){
alert("用户名不存在！");
}
（6）删除数据项
1
localStorage.removeItem("user_name");
（7）清除所有数据
1
localStorage.clear();
（8）查找所有的数据项
不知道键名，可以使用 key() 方法从本地或者会话存储中取得所有的数据项。下面样例，点击按钮后就会列出所有本地存储中的数据。
原文:HTML5 - Web存储使用详解（本地存储、会话存储）
1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Find All Items</title>
<script>
function findAllItems() {
//取得用于保存数据项的<ul>元素
var itemList = document.getElementById("itemList");
//清除列表
itemList.innerHTML = "";
//遍历所有数据项
for (var i=0; i<localStorage.length; i++) {
//取得当前位置数据项的键
var key = localStorage.key(i);
//取得以该键保存的数据值
var item = localStorage.getItem(key);
//用以上数据创建一个列表项添加到页面中
var newItem = document.createElement("li");
newItem.innerHTML = key + ": " + item;
itemList.appendChild(newItem);
}
}
</script>
<body>
<button onclick="findAllItems()">导出所有本地存储数据</button>
<ul id="itemList">
</ul>
</body>
</html>
5，响应存储变化
Web存储也为我们提供了在不同浏览器窗口间通信的机制。也就是说在本地存储或会话存储发生变化时，其他查看同一页面或者同一站点中其他页面的窗口就会触发 window.onStorage 事件。
这里说的存储变化，指的是向存储中添加新数据项，修改既有数据项，删除数据项或者清除所有数据。而对存储不产生任何影响的操作（用既有键名保存相同的值，或者清除原本就是空的存储空间），不会引发 onStorage 事件。
下面同时打开两个页面，在页面1中修改数据项，页面2会响应 onStorage 事件，并报告结果。
原文:HTML5 - Web存储使用详解（本地存储、会话存储）
原文:HTML5 - Web存储使用详解（本地存储、会话存储）
--- page1.html ---
46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page1</title>
<style>
fieldset {
margin-bottom: 15px;
padding: 10px;
}
label {
width: 40px;
display: inline-block;
margin: 6px;
}
input {
margin-top: 12px;
width: 200px;
}
</style>
<script>
function addValue() {
// 取得两个文本框中的值
var key = document.getElementById("key").value;
var item = document.getElementById("item").value;
// 在本地存储中保存数据项
// (如果同名键已经存在，则用新值替换旧值)
localStorage.setItem(key, item);
}
</script>
<body>
<fieldset>
<legend>Local Storage</legend>
<label for="key">Key:</label>
<input id="key"><br>
<label for="item">Value:</label>
<input id="item">
<br>
<button onclick="addValue()">Add</button>
</fieldset>
</body>
</html>
--- page2.html ---
1
2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page2</title>
<style>
#updateMessage {
font-weight: bold;
}
</style>
<script>
window.onload = function() {
alert(1);
//给window.onStorage事件添加一个处理函数
window.addEventListener("storage", storageChanged, false);
};
function storageChanged(e) {
alert(2);
var message = document.getElementById("updateMessage");
message.innerHTML = "Local storage updated.";
message.innerHTML += "<br>Key: " + e.key;
message.innerHTML += "<br>Old Value: " + e.oldValue;
message.innerHTML += "<br>New Value: " + e.newValue;
message.innerHTML += "<br>URL: " + e.url;
}
</script>
<body>
<div id="updateMessage">No updates yet.</div>
</body>
</html>
Web存储使用详解（本地存储、会话存储）的更多相关文章
- MySQL数据库的各种存储引擎详解
原文来自:MySQL数据库的各种存储引擎详解 MySQL有多种存储引擎,每种存储引擎有各自的优缺点,大家可以择优选择使用: MyISAM.InnoDB.MERGE.MEMORY(HEAP).BDB ...
- CEPH-4：ceph RadowGW对象存储功能详解
ceph RadosGW对象存储使用详解 一个完整的ceph集群,可以提供块存储.文件系统和对象存储. 本节主要介绍对象存储RadosGw功能如何灵活的使用,集群背景: $ ceph -s clust ...
- Kubernetes K8S之存储Volume详解
K8S之存储Volume概述与说明,并详解常用Volume示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS7.7 2C ...
- Kubernetes K8S之存储ConfigMap详解
K8S之存储ConfigMap概述与说明,并详解常用ConfigMap示例 主机配置规划 服务器名称(hostname) 系统版本 配置 内网IP 外网IP(模拟) k8s-master CentOS ...
- Asp.net中web.config配置文件详解（一）
本文摘自Asp.net中web.config配置文件详解 web.config是一个XML文件,用来储存Asp.NET Web应用程序的配置信息,包括数据库连接字符.身份安全验证等,可以出现在Asp. ...
- C#中web.config文件详解
C#中web.config文件详解 一.认识Web.config文件 Web.config 文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NE ...
- 2-4、nginx特性及基础概念-nginx web服务配置详解
Nginx Nginx:engine X 调用了libevent:高性能的网络库 epoll():基于事件驱动event的网络库文件 Nginx的特性: 模块化设计.较好扩展性(不支持模块动态装卸载, ...
- Java web.xml 配置详解
在项目中总会遇到一些关于加载的优先级问题,近期也同样遇到过类似的,所以自己查找资料总结了下,下面有些是转载其他人的,毕竟人家写的不错,自己也就不重复造轮子了,只是略加点了自己的修饰. 首先可以肯定的是 ...
- [深入学习Web安全](5)详解MySQL注射
[深入学习Web安全](5)详解MySQL注射 0x00 目录 0x00 目录 0x01 MySQL注射的简单介绍 0x02 对于information_schema库的研究 0x03 注射第一步—— ...
随机推荐
- Android简单的利用SoundPool进行播放铃声的实例代码
MainActivity.java package com.example.pengdonglin.soundpool_demo; import android.annotation.Suppress ...
- python 常用的模块(hashlib)转
摘要算法简介 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串( ...
- 直方图均衡(HE)与局部色调映射(LTM) .
直方图均衡(Histogram Equalization)是图像处理中一个十分基础的概念,具有调整图像灰度,增强对比度的作用. 限制对比度自适应直方图均衡(Contrast Limited Ad ...
- [SCSS] Create a gradient with a Sass loop
In this lesson, you will learn how to iteratively generate CSS selectors and attributes using Sass l ...
- Centos 6安装 Jenkins
前言 持续集成的概念 持续集成,Continuous integration ,简称CI. 持续集成正是针对这一类问题的一种软件开发实践.它倡导团队开发成员必须经常集成他们的工作,甚至每天都可能发生多 ...
- debounce 防抖动函数
http://lodash.think2011.net/debounce _.debounce(func, [wait=0], [options]) 创建一个防抖动函数. 该函数会在 wait 毫秒后 ...
- POJ2536 Gopher II【二分图最大匹配】
题目链接: http://poj.org/problem? id=2536 题目大意: 有N仅仅鼹鼠和M个洞穴,假设鼹鼠在S秒内不可以跑到洞穴,就会被老鹰捉住吃掉. 鼹鼠跑的速度为V米/秒. 已知一个 ...
- mongo 增
mongodb存储的是文档,文档是json格式的对象,我们的增删改查,都要传输json对象 json是一个对象,js里有数组这个概念,只需要把多个对象放到一个数组里,即可 use test //首先选 ...
- TCP/IP协议分析(推荐)
一;前言 学习过TCP/IP协议的人多有一种感觉,这东西太抽象了,没有什么数据实例,看完不久就忘了.本文将介绍一种直观的学习方法,利用协议分析工具学习TCP/IP,在学习的过程中能直观的看到数据的具体 ...
- Cent OS安装My Sql
因为公司的需要,所以就自己学习了一下在Linux上安装MySQL,但是翻查了好多博客,没有特别清楚,自己写下来好好总结一下 一.系统环境 CentOS-6.3-i386-bin-DVD1 二.下载My ...