web本地存储
Web本地存储
通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储。
在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全, 并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。
本地存储经由起源地(origin)(经由域和协议)。所有页面,从起源地,能够存储和访问相同的数据。
1. Web存储介绍
(1)本地存储,对应 localStorage 对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。
(2)会话存储,对应 sessionStorage 对象。用于临时保存针对一个窗口(或标签页)的数据。 在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。
2. 本地存储与会话存储的异同.
(1)本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
(2)本地存储主要用来保存访客将来还能看到的数据。
(3)会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。
3. Web存储容量限制
大多数浏览器都把本地存储限制为 5MB 以下。
4. 实例
(1)文本数据的保存和读取
localStorage.setItem("user_name","hangge.com");
var userName = localStorage.getItem("user_name");
(2)数值的保存和读取
localStorage.setItem("user_age",100);
var userAge = Number(localStorage.getItem("user_age"));
(3)日期的保存和读取
//创建日期对象
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)自定义对象的保存和读取
//自定义一个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
if(localStorage.getItem("user_name") == null){
alert("用户名不存在!");
}
(6)删除数据项
localStorage.removeItem("user_name");
(7)清除所有数据
localStorage.clear();
storage事件
HTML5 还为我们带来了和 Storage 相关的事件。事件发生有两个条件:
1. localStorage 的内容被改变;
2. 改变发生在另一个网页中(很多人都忽略了这个条件)。
window.addEventListener('storage', function(e) {
var key = e.key;
var old_value = e.oldValue;
var new_value = e.newValue;
var url = e.url;
}, false); 参考链接:多个标签之间共享sessionStorage
web本地存储
web本地存储的更多相关文章
- web 本地存储 (localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...
- [web 前端] web本地存储(localStorage、sessionStorage)
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
- web本地存储(localStorage、sessionStorage)
web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...
- Html5 web 本地存储 (localStorage、sessionStorage)
HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...
- Html5 web本地存储
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...
- web本地存储localStorage和sessionStorage
用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...
- web本地存储 sessionStorage 和 localStorage
1.sessionStorage 临时存储 为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载. 2.localStorage 长期存储 与sessionStorage一样,但在 ...
- web本地存储-IndexedDB
IndexedDB, HTML5中的一种数据存储方式,索引数据库. 一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称.一个数据库可包含多个对象存储,一个对象存储相当于 ...
- web本地存储-LocalStorage
LocalStorage是HTML5 提供的在客户端存储数据的方法.替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上.目 ...
随机推荐
- java第二课,java基础2
关键字: 在java中被赋予了特殊含义的单词,具有特殊用途. 标识符: 由字母,数字,下划线(_),美元符($)组成,不能以数字开头,不能是jav ...
- 关于springmvc配置validator的注意事项
<mvc:annotation-driven validator="validator" /> 在使用springmvc整合hibernate-validator做表单 ...
- Mybatis JPA 代码构建
前段时间了解到Spring JPA,感觉挺好用,但其依赖于Hibernate,本人看到Hibernate就头大(不是说Hibernate不好哈,而是进阶太难),于是做了一个迷你版的Mybatis JP ...
- json-server mock数据
前言: 项目开发中,影响项目进程的常常是由于在前后端数据交互的开发流程中停滞,前端完成静态页面的开发后,后端迟迟未给到接口.而现在,我们就可以通过根据后端接口字段,建立一个REST风格的API接口,进 ...
- (转)HTTP协议漫谈
HTTP协议漫谈 简介 园子里已经有不少介绍HTTP的的好文章.对HTTP的一些细节介绍的比较好,所以本篇文章不会对HTTP的细节进行深究,而是从够高和更结构化的角度将HTTP协议的元素进行分类讲 ...
- HDU1035 Robot Motion
Problem Description A robot has been programmed to follow the instructions in its path. Instructions ...
- nodeJS之crypto加密
前面的话 加密模块提供了 HTTP 或 HTTPS 连接过程中封装安全凭证的方法.也提供了 OpenSSL 的哈希,hmac, 加密(cipher), 解密(decipher), 签名(sign) 和 ...
- Android中的广播
Android中的广播 广播接受器,可以比喻成收音机.而广播则可以看成电台. Android系统内部相当于已经有一个电台 定义了好多的广播事件,比如外拨电话 短信到来 sd卡状态 电池电量变化... ...
- 【 js 基础 】【 源码学习 】backbone 源码阅读(二)
最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(source-code-study)进行参考交流,有详细的源码注释,以及知识总结,同时 ...
- 写移动端必备的meta标签
<meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-C ...