localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
同源的判断规则:
http://www.test.com
https://www.test.com (不同源,因为协议不同)
http://my.test.com(不同源,因为主机名不同)
http://www.test.com:8080(不同源,因为端口不同)
localStorage和sessionStorage使用时使用相同的API:
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
枚举localStorage的方法:
for(var i=0;i<localStorage.length;i++){
var name = localStorage.key(i);
var value = localStorage.getItem(name);
}
删除localStorage中存储信息的方法:
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。
例如:
localStorage.key = {value1:"value1"};
localStorage.key.value1='a';
这里是无法对实际存储的值产生作用的,下面的写法也不可以:
localStorage.getItem("key").value1="a";
分享到:
相关推荐
首先,了解`localStorage`和`sessionStorage`的基本使用方法。这两个API都提供`setItem`、`getItem`、`removeItem`和`clear`等方法,用于存储和获取数据。其中,`localStorage`的数据不会随着浏览器会话的结束而清除...
localStorage和sessionStorage在使用上有很多相似之处,但也存在关键性的差异。 ### localStorage的基本概念和用法 localStorage提供了一种在客户端存储数据的机制,其特点包括域内安全和永久保存。所谓域内安全...
sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息,只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭,数据清空 存在内存中,除非自己删除 浏览器关闭,...
例如,`store-master`可能就是这样一个库,它提供了一套完善的API和上述功能,让开发者能够更高效、更安全地使用`localStorage`和`sessionStorage`。 总的来说,理解和优化`localStorage`和`sessionStorage`的使用...
在JavaScript中,我们可以使用`JSON.stringify()`方法将JavaScript对象转换为JSON字符串,然后可以存储到localStorage或sessionStorage;反之,使用`JSON.parse()`方法将JSON字符串解析回JavaScript对象。 2. ...
使用`localStorage`和`sessionStorage`的基本方法包括`setItem`、`getItem`、`removeItem`和`clear`: - `setItem(key, value)`:将键值对存储到本地存储中,如`localStorage.setItem('key', 'value')`。 - `...
它提供了一个统一的接口,使得开发者无需关心底层实现,只需要调用相似的方法就能处理`localStorage`和`sessionStorage`。例如,你可以通过相同的API进行读取、写入和删除数据操作,这提高了代码的可读性和可维护性...
SessionStorage的使用方法与LocalStorage几乎一致: ```javascript // 设置 sessionStorage.setItem("mycolor", "456"); sessionStorage.mycolor = '456'; // 获取 var $color = sessionStorage.getItem("mycolor...
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...
安装npm install --save hover-battery用法在使用计划要使用的所有操作构建引擎之后,添加悬停电池操作和侦听器。 您可以选择传入localStorage , sessionStorage或要写入的其他对象。 const Hover = require ( '...
一种功能丰富且友好的方式,可以利用localStorage和sessionStorage(JSON,命名空间,扩展等)。 下载: 或 : npm install store2 : Install-Package store2文献资料主要存储功能可以直接处理set , get , ...
该插件包括, , 三个部分,使用方法非常简单,直接引入即可。vue-storages在vue开发环境下的使用方法安装采用npm方式安装:$ npm install vue-storages --save或者采用yarn方式安装:$ yarn add vue-storages模块导入...
在localStorage或sessionStorage 。 安装 npm install --save svelte-persistent-store 用法 坚持到localStorage import { writable , readable , derived } from 'svelte-persistent-store/dist/local' ; // or ...
超级存储为cookie,localStorage和sessionStorage提供了一些帮助。 1Kb压缩 存储所有类型的值(对象和数组) 空时的默认值 前缀键 会话保持在标签之间 安装 安装npm软件包 npm install @jaysalvat/super-...
然而,虽然它们在使用方法上相似,但它们在存储的生命周期上却有着明显的不同。SessionStorage设计为只在当前浏览器的会话中有效,这意味着只要浏览器的标签页是打开的,SessionStorage中的数据就存在。但一旦用户...
详解Vue中localstorage和sessionstorage的使用 在 Vue 项目中,localstorage 和 sessionstorage 是两个常用的客户端存储机制。它们可以帮助开发者存储一些数据,以便于后续使用。但是,在实际项目中,直接使用 ...
- **持久性**:`localStorage`是一种持久性的存储方式,存储的数据除非被用户手动清除或通过JavaScript调用`clear`方法,否则将会一直保留。 - **存储量**:每个域名下的`localStorage`的存储容量大约为5MB左右,...
本文将详细介绍这两种存储方式的使用方法、差异、以及如何在实际项目中有效利用它们。 localStorage和sessionStorage是强大的Web存储API,它们为Web应用程序提供了在客户端存储数据的能力。通过合理使用这两种存储...