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";
分享到:
相关推荐
使用Typescript编写更加易用的localStorage和sessionStorage的API
一种更好的方法来使用localStorage和sessionStorage
sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息,只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭,数据清空 存在内存中,除非自己删除 浏览器关闭,...
通过阅读各路大神对web存储locastorage和sessionstorage的用法解析,深有感触,下面小编把localstorage和sessionstorage使用记录分享到脚本之家平台,供大家参考
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...
在localStorage或sessionStorage 。 安装 npm install --save svelte-persistent-store 用法 坚持到localStorage import { writable , readable , derived } from 'svelte-persistent-store/dist/local' ; // or ...
cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同,今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法,需要的朋友参考下吧
主要介绍了localStorage、sessionStorage的用法以及存储机制等内容。
安装npm install --save hover-battery用法在使用计划要使用的所有操作构建引擎之后,添加悬停电池操作和侦听器。 您可以选择传入localStorage , sessionStorage或要写入的其他对象。 const Hover = require ( '...
该插件包括, , 三个部分,使用方法非常简单,直接引入即可。vue-storages在vue开发环境下的使用方法安装采用npm方式安装:$ npm install vue-storages --save或者采用yarn方式安装:$ yarn add vue-storages模块导入...
超级存储为cookie,localStorage和sessionStorage提供了一些帮助。 1Kb压缩 存储所有类型的值(对象和数组) 空时的默认值 前缀键 会话保持在标签之间 安装 安装npm软件包 npm install @jaysalvat/super-...
一种功能丰富且友好的方式,可以利用localStorage和sessionStorage(JSON,命名空间,扩展等)。 下载: 或 : npm install store2 : Install-Package store2文献资料主要存储功能可以直接处理set , get , ...
主要介绍了详解Vue中localstorage和sessionstorage的使用方法和经验心得,有需要的朋友跟着小编参考学习下吧。
html5的一个非常cool的功能,就是web ...1、localstorage localstorage 的使用比较简单,方法有: 复制代码代码如下:localStorage.setItem(key,value);//保存数据localStorage.getItem(key);//读取数据localStorage.re
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。 localStorage生命周期是...
对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage 1.sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开...
网络存储一个最小的Javascript库,可以改善您使用localStorage或sessionStorage 。安装npm $ npm install webStorage吉特$ git clone https://github.com/georapbox/webStorage.git几句话... 该库的目的是允许用户...