web存储机制localStorage和sessionStorage
https://www.cnblogs.com/yaoyuqian/p/7901052.html
web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享)
1.sessionStorage 数据放在服务器上(IE不支持)严格用于一个浏览器会话中存储数据,数据在浏览器关闭后会立即删除
2.localStorage 数据在客户端(低版本IE ( IE6, IE7 ) 不支持,并且不支持查询语言)跨会话持久化地存储数据localStorage与sessionStorage的区别:localStorage只要在相同的协议、相同的主机名、相同的端口下,即同源就能读取/修改到同一份localStorage数据。sessionStorage比localStorage更严苛一点,除了协议、主机名、端口外,还要求在同一窗口(也就是浏览器的标签页)下。用法相同:(以sessionStorage为例)1.添加:sessionStorage.setItem(key, value);//value可以任何数据类型2.获取: sessionStorage.getItem(key); 3.删除: sessionStorage.removeItem(key);//删除该存储对象中key的键值对 4.清除所有: sessionStorage.clear();//清除该存储对象中所有的键值对 5.检索(查): sessionStorage.key();//检索key[n]的值 实例:
localStorage.setItem("x",1);//以"x"的名字存储一个数值localStorage.x = 1;//直接向 Web 存储对象添加键/值对localStorage.getItem("x");//获取数值localStorage.x;//直接从 Web 存储对象中检索键/值对localStorage.removeItem("x");//删除“x”项。//removeItem是唯一通用的能删除单个名值对的方式。(因为IE8不支持delete操作符)localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式//将一个数组存储为字符串var myArray = new Array('First Name', 'Last Name', 'Email Address');localStorage.formData = JSON.stringify(myArray);//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组var myArray = JSON.parse(localStorage.formData);
还有一种更实用的存取方法:
var obj = {
name: 'doctorhou',
describe: '高大、威猛、帅气'
};
localStorage.setItem('test', JSON.stringify(obj));
var getObj = JSON.parse(localStorage.getItem('test'));
// 存储数据发生改变的时候(对应事件):window.onstorage
示例:
<body><h3>这是我的用户名和密码</h3><div id="username"></div><div id="password"></div><script>// 1.获取对象var username = document.getElementById('username');var password = document.getElementById('password');// 2.将存储的数据写入到两个div中username.innerHTML = localStorage.getItem('username');password.innerHTML = localStorage.getItem('password');// 3.做stroage的事件监听window.onstorage = function(e) {// StorageEvent// console.log(e);// console.log(e.key);修改的键// console.log(e.oldValue);原来的值// console.log(e.newValue);新值username.innerHTML = e.newValue;}</script></body>
转载于:https://www.cnblogs.com/beimingbingpo/p/9603563.html
web存储机制localStorage和sessionStorage相关推荐
- HTML5 Web 存储(localStorage和sessionStorage)
localStorage生命周期是永久,除非主动清除localStorage信息,否则这些信息将永远存在.存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信. // ...
- JS cookie与web存储(localStorage与sessionStorage)
cookie <script>document.cookie = 'a=1'console.log(document.cookie) // style=null; a=1 </scr ...
- Web数据存储之localStorage和sessionStorage
Web数据存储之localStorage和sessionStorage 学习前端以来,自己了解有localStorage和sessionStorage的相关存储的知识,也有实践过,但是之前只限于能用的 ...
- Web存储机制—sessionStorage,localStorage使用方法
基本概念 Web Storage 包含两种机制: sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) lo ...
- HTML5客户端数据存储机制Web Storage和Web SQL Database
引言 html5本地存储可以选择两种方式,一种是本地存储,一种是sqlite. 比如开发html5的购物车功能,就可以考虑选择其中之一,进行本地存储与操作. 又或者保存用户登录信息,可以使用local ...
- js客户端存储之Web存储
WEB存储 客户端存储有几种方式,WEB存储就是其中一种.最初作为H5的一部分被定义成API形式,后来被剥离出来作为独立的标准.所描述的API包含localStorage对象和sessionStora ...
- jQuery web存储 详解
写在本章开始前: 第十七章作为独立的一章,涉及到jQuery的方方面面,是篇幅很长的一章.为了更新客户端存储(本章),特跳过十七章.(十七章将在本章完成后继续更新,望大家关注.) web应用允许 ...
- 适合0基础的web开发系列教程-web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- HTML5 中Web存储问题
HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式.注意: Internet Explorer 7 及更早IE版本不支持web 存储. 什么是 HTML5 Web ...
最新文章
- as3回调方法模拟事件监听
- 安卓app和iosapp开发有什么不同呢?-综合外链_想让卫星软件不“软” 给草根开发者提供的条件得“硬”...
- 计算机网络技术 选修 沪科版教案,沪科版《信息技术基础》必修 全册教案.doc...
- 应用矩阵分析1 子空间分析1 线性子空间基础
- 计算机网络通信的仿真,计算机网络虚拟仿真技术研究与应用.doc
- 一个关于c++string比较的问题
- 2020已去,2021未来
- rds 如何学习数据库_如何将本地数据库迁移到云数据库 RDS 上?
- 杭州python爬虫招聘_python爬取招聘网站(智联,拉钩,Boss直聘)
- 【计算机组成原理】定点乘法运算之原码两位乘法
- 12. 程序扩展性(高级特性)
- 基于DPI(深度报文解析)的应用识别2------实际分析
- 软件教程给MyEclipse 10增加SVN功能
- c语言计算器自动计算源代码,c语言计算器源代码
- RTSP/GB28181/SDK/EHOME协议视频智能分析共享平台EasyCVR安防视频云服务新增智能人脸识别功能
- Flask-MDict搭建在线Mdict词典服务
- win7纯净版系统哪里下载好
- 鞠今日截语2014.05.11火星合月
- java中的枚举是什么?枚举怎么使用?
- wMy_Python ~储存相关~