web本地存储
2024-08-20 21:10:13
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本地存储
最新文章
- Java四种线程池的使用
- Javascript之旅——第五站:说说那些所谓的包装类型
- iOS 开发笔记 -- 各种细枝末节的知识(水滴石穿)
- 实例讲解虚拟机3种网络模式(桥接、nat、Host-only)
- 怎样在cmd(命令提示符)下进行复制粘贴操作
- ASP常用函数
- 一招解决IE7无法访问https网页
- cf479E Riding in a Lift
- MacOS下使用VMware5 破解 安装win7 ISO 激活
- SQL Server 有关EXCEPT和INTERSECT使用
- 【原创】10万条数据采用存储过程分页实现(Mvc+Dapper+存储过程)
- 最近一些朋友问我,临近快毕业了专业不对口,想转行看到IT行业就业前景不错,但是编程语言众多不了解,不知道哪门语言能够快速入门掌握,短期能让我找到工作
- 理解Hibernate事务机制,首先需要搞清楚的6个问题
- 遍历Map和List的几种方法和性能比较
- 删除github上面的项目
- Codeforces 841D Leha and another game about graph - 差分
- 网站流量分析指标-PV/UV/PR/ip分析及区别
- 网狐荣耀平台找不到存储过程 'GSP_GS_LoadGameMatchItem'错误解决
- php 的 PHPExcel1.8.0 使用教程
- Hands on Machine Learning with Sklearn and TensorFlow学习笔记——机器学习概览