HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。HTML5 使用 JavaScript 来存储和访问数据。
ocalStorage和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";
相关推荐
sessionStorage 概念 存放在客户端的一段文本信息 存储在客户端的临时信息,只能存放字符串类型数据 同localStorage 大小 4k 5M 5M 生命周期 浏览器关闭,数据清空 存在内存中,除非自己删除 浏览器关闭,...
使用Typescript编写更加易用的localStorage和sessionStorage的API
一种更好的方法来使用localStorage和sessionStorage
悬停电池 悬停引擎存储的LocalStorage / SessionStorage内存通过将其包含在您的项目中,Hover-Engine可以在页面重新加载和导航期间持久存储它。安装npm install --save hover-battery用法在使用计划要使用的所有操作...
localStorage,sessionStorage的使用-介绍了localStorage,sessionStorage基本信息及使用注意事项
序这是一个关于浏览器cookie,sessionStorage,localStorage操作的插件,它增加并完善了原有API功能。该插件包括, , 三个部分,使用方法非常简单,直接引入即可。vue-storages在vue开发环境下的使用方法安装采用npm...
Cookie Cookie是什么:指某些网站存储在用户本地终端的数据 ...应用层面来说:cookie是一段字符串; js层面来说:cookie是document对象下的一个String类型的属性 查看cookie:[removed] Cookie的三个关键 ...
在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-...
H5 localStorage 和 sessionStorage 对json的处理方式
一个本地存储工具,通过相同的api去支持localStorage和sessionStorage
通过阅读各路大神对web存储locastorage和sessionstorage的用法解析,深有感触,下面小编把localstorage和sessionstorage使用记录分享到脚本之家平台,供大家参考
cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同,今天小编通过本文给大家分享jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法,需要的朋友参考下吧
一种功能丰富且友好的方式,可以利用localStorage和sessionStorage(JSON,命名空间,扩展等)。 下载: 或 : npm install store2 : Install-Package store2文献资料主要存储功能可以直接处理set , get , ...
【cookie_session_localstorage_sessionstorage】【前端】web中的k-v存储们有什么区别
角度存储Cookie,会话和本地存储的装饰器和服务该库添加了装饰器,使使用HTML5的localStorage和sessionStorage自动保存和恢复变量变得非常容易。 它还提供了Angular-Injectable Session-和LocalStorageService。包括...
js window 对象的所有属性的方法的导图,包含 history location localStorage sessionStorage
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...
主要介绍了localStorage、sessionStorage的用法以及存储机制等内容。
主要介绍了详解Vue中localstorage和sessionstorage的使用方法和经验心得,有需要的朋友跟着小编参考学习下吧。