Web Storage 有两种形式:localStorage (本地存储) 和 sessionStorage (会话存储)。 与 cookie 相似,都是使用键值对来对数据进行存储和读取。
这里对 cookie 与 Web Storage 进行了比较:
cookie:
容量 4kb,支持各种浏览器,但是每次请求浏览器都会把本机存的 cookies 发送到服务器
Web Storage:
1) 存储空间更大
2) 数据则仅仅是存在本地,不与服务器发生任何交互
3) 独立的存储空间
而 localStorage 与 sessionStorage 的区别:
localStorage:
即使浏览器关闭了,数据也会被保存下来并可用于所有来自同源(相同域名、协议和端口)窗口的加载。
主要用于参数设置或者偏好设置的功能。
sessionStorage:
数据存储在窗口对象中,对于其他窗口或标签不可见,并且当窗口关闭时,数据丢失。
主要用于特殊的窗口状态。
那么要怎么使用 Web Storage?
其实提供的接口很简单,localStorage 和 sessionStorage 的用法是一样的。
设置数据:setItem(name, value)
获取数据:getItem(name)
删除键值:removeItem(name)
删除所有键值:clear()
例如:
localStorage.setItem('name', 'liulangdewo'); localStorage.getItem('name'); //'liulangdewo' localStorage.removeItem('name'); localStorage.clear();
当然,你也可以使用普通的对象用法:
localStorage.name = 'liulangdewo'; localStorage['name'] = 'liulangdewo'; localStorage.name; //'liulangdewo' localStorage['name']; //'liulangdewo' delete localStorage.name;//删除键值 delete localStorage['name'];//删除键值
在实际使用中,会先将数据转换为 JSON,作为字符存储,如:
localStorage[name] = JSON.stringify(value); //存储 JSON.parse(localStorage[name]); //读取
如何判断一个浏览器是否支持 Web Storage 呢?
function supportsLocalStorage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } }
相关推荐
软件名称:华硕网络存储:WebStorage APK名称:com.ecareme.asuswebstorage 最新版本:2.1.28.8207 支持ROM:2.2及更高版本 界面语言:简体中文 软件大小:10.23 M 软件简介: 全球超过三千万个注册用户;Google ...
html web storage 别人写的,共享下
react-webstorage 直接使用 W3C WebStorage API 的任何实现作为 React/Flux 风格的存储。 var WebStorage = require ( 'react-webstorage' ) , dispatcher = require ( './path/to/app-dispatcher' ) ; var web...
Web Storage.rar
var webstorage = require ( 'webstorage' ) ; var storage = webstorage ( ) ; storage . setItem ( 'foo' , 'bar' ) ; storage . getItem ( 'foo' ) // => 'bar' 如果你想在本地持久化数据,你可以使用插件。 ...
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此...
ngx-webstorage 本地和会话存储-Angular服务 该库提供了易于使用的服务,可通过Angular应用程序管理Web存储(本地和会话)。 它还提供了两个装饰器来同步组件属性和Web存储。 指数: : : 从v2.x迁移到v3 将您的...
网络存储本地 一个持久性插件为本地文件存储。... var webstorage = require ( 'webstorage' ) ; var local = require ( 'webstorage-local' ) ; webstorage ( local ( '/tmp' ) ) ; 执照 麻省理工学院
jquery-webstorage 这个插件的目标是简化 webstorage 的使用(也称为 sessionStorage 和 localStorage): 您可以存储任何类型的数据类型并且不关心转换 你可以使用命名空间 您可以跨不同的选项卡/窗口使用存储...
Angular的Webstorage服务 该软件包为提供了服务包装器。 每当您的应用程序需要使用localStorage或sessionStorage ,可以直接使用此包提供的包装版本,而不是直接使用它们。 这样做具有以下优点: 从一种存储类型...
主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料,Web Storage如何用JSON存储多个数据,感兴趣的小伙伴们可以参考一下
asus webstorage是一个支持多平台的云存储应用程序。安装到您的手机和/或平板电脑后,能帮您存取和管理您个人在线存储中的数字文档、播放音乐和视频、以及观看照片。 功能介绍 将您的文件存放在最安全的云空间 所有...
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB,感兴趣的朋友可以了解下
h5webstorage 适用于Angular2HTML5 WebStorage API (服务) (服务) (装饰器) (功能) 用 下载库: npm install h5webstorage --save 2.将模块和提供程序导入顶级模块: import { WebStorageModule } ...
网络存储演示一个简单的演示,用于展示 Web Storage API 的用法。 有关其工作原理的更多详细信息,请阅读 。
角度网络存储 这个模块注定要与一起使用。 它允许您将数据在浏览器的... 下载存储库并从 dist 存储库中获取 angular-webstorage.js 文件。 将该模块包含在您的 Angular 应用程序中。 在 Angular 导入之后,在index.htm
更轻松地与 Web Storage 交互。 强调 localStorage和sessionStorage最小包装器。 占地面积小。 基于 Getter/Setter。 您可以忘记序列化错误。 您可以将它与任何框架一起使用。 如果localStorage或...
这个库像开发者工具一样显示 WebStorage 的数据。所以,这个库让你的调试更容易。特别是你正在用 IE 调试。这个库对应 jQuery gt 2.1.1。并且基于WebStorage W3C 推荐 ### 总结 webstorageinfoo 是一个在 MIT 许可下...