如何实现浏览器内多标签页之间的通信？

调用localStorage 、sessionStorage 、cookies本地存储方式。

html5中web本地存储（缓存本地数据）

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

存储对象属性：length (返回存储对象中包含多少条数据。 )

客户端存储数据localStorage

用于长久保存网站的数据(它不会随着我们关闭浏览器而消失)，保存的数据没有过期时间，可手动删除（就是通过js脚本删除--删除单个，删除所有）。

localStorage是一个对象，我们通过typeof检测 localStorage数据类型。检测的结果是其数据类型是object。

常用API如下：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

获取得到某个索引的key：localStorage.key(index);

注意：键/值对 --- 通常以字符串存储

// localStorage 存储对象console.log(localStorage);

预览效果

保存数据：localStorage.setItem(key,value);

 localStorage.setItem('uname','jerry')localStorage.setItem('age',20)localStorage.setItem('sex','女')

预览效果

读取数据：localStorage.getItem(key);

从localStorage上获取uname键名的值var uname = localStorage.getItem('uname');var age = localStorage.getItem('age');var sex = localStorage.getItem('sex');console.log('读取到的数据是:'+ uname+','+age+','+sex);

预览效果

删除单个数据：localStorage.removeItem(key);

localStorage.removeItem('sex');

预览效果

删除所有数据：localStorage.clear();

localStorage.clear();

预览效果

获取得到某个索引的key：localStorage.key(index);

var k0 = localStorage.key(0);console.log(k0);var k1 = localStorage.key(1);console.log(k1);

预览效果

客户端存储数据sessionStorage

sessionStorage存储的数据在用户关闭浏览器窗口后，数据会被删除。

常用的API(和localStorage的api相同)如下所示：

保存数据：sessionStorage.setItem(key,value);

读取数据：sessionStorage.getItem(key);

删除单个数据：sessionStorage.removeItem(key);

删除所有数据：sessionStorage.clear();

获取得到某个索引的key: sessionStorage.key(index);

注意：键/值对 --- 通常以字符串存储

console.log(sessionStorage);

预览效果

保存数据：sessionStorage.setItem(key,value);

sessionStorage.setItem('username','李狗熊');sessionStorage.setItem('email','ligouxiong@168.com');sessionStorage.setItem('tel','12365448589');

预览效果

读取数据：sessionStorage.getItem(key);

var username = sessionStorage.getItem('username');console.log('读取到的数据是:'+username);

预览效果

删除单个数据：sessionStorage.removeItem(key);

sessionStorage.removeItem('email');

预览效果

删除所有数据：sessionStorage.clear();

sessionStorage.clear();

预览效果

获取得到某个索引的key: sessionStorage.key(index);

 var key0 = sessionStorage.key(0);console.log(key0);var key1 = sessionStorage.key(1);console.log(key1);

预览效果

javascript存储对象相关推荐

JavaScript系列-----对象基于哈希存储（Key，Value之Key篇）（1）
1.Hash表的结构首先,允许我们花一点时间来简单介绍hash表. 1.什么是hash表 hash表是一种二维结构,管理着一对对<Key,Value>这样的键值对,Hash表的结构如下图 ...
javascript本地缓存方案-- 存储对象和设置过期时间
cz-storage 解决问题 1. 前端js使用localStorage的时候只能存字符串,不能存储对象 cz-storage 可以存储 object undefined number string ...
JavaScript中对象数据存储
JS中对象数据存储对象数据存储在堆栈中.栈的数据读取,写入速度快,但是存储的内容较少.堆的读取和写入速度慢,但是存储的内容多.举个例子来说就像电脑中内存和硬盘,内存就像栈,需要经常获取,写入速度比较 ...
在HTML5 localStorage中存储对象
我想将JavaScript对象存储在HTML5 localStorage ,但是我的对象显然正在转换为字符串. 我可以使用localStorage存储和检索原始JavaScript类型和数组,但是对象 ...
html number方法,JavaScript Number 对象
JavaScript Number 对象 JavaScript 只有一种数字类型. 可以使用也可以不使用小数点来书写数字. JavaScript 数字 JavaScript 数字可以使用也可以不使用小 ...
Javascript Proxy对象简介
Javascript Proxy对象简介本文转载自:众成翻译译者:eJayYoung 链接:http://www.zcfy.cc/article/4755 原文:https://blog.cam ...
JavaScript 自定义对象及 new()原理与实现如何完整地手写实现new
JavaScript 自定义对象及 new() 原理与实现作者: 李俊才邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_285502 ...
html 属性存储对象,在HTML5 localStorage中存储对象
Stringify并不能解决所有问题似乎这里的答案并未涵盖JavaScript中可能的所有类型,因此这里有一些关于如何正确处理它们的简短示例://Objects and Arrays: var ob ...
【JS】javascript正则表达式的基本使用（JavaScript RegExp 对象）
javascript正则表达式的基本使用(JavaScript RegExp 对象) 1. 正则表达式是什么? 2. 基本使用语法 2.1 正则表达式思维导图 2.2 定义正则表达式 2.2.1 普通 ...

javascript存储对象

客户端存储数据localStorage

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

获取得到某个索引的key：localStorage.key(index);

客户端存储数据sessionStorage

保存数据：sessionStorage.setItem(key,value);

读取数据：sessionStorage.getItem(key);

删除单个数据：sessionStorage.removeItem(key);

删除所有数据：sessionStorage.clear();

获取得到某个索引的key: sessionStorage.key(index);

javascript存储对象相关推荐

最新文章

热门文章