Web存储(Web Storage)介绍
Web存储即在客户端存储数据。
在没有Web Storage之前,是通过cookie来在客户端存储数据的。但是由于
- 浏览器能存cookie数比较少。如IE8,Firefox,opera每个域可以保存的50个cookie,Safari/WebKit没有限制。一个cookie最多可以存放4096B左右的数据(见http://www.ietf.org/rfc/rfc2965.txt )。
- 每次请求时,cookie都会存放在请求头中,传输到服务器端。但如果请求头
大小超过了限制,服务器会处理不了。
因此cookie不适合大量数据的存储。相比用Web Storage更适合存储大量数据:
- 每个域Chrome,Firefox和Opera是5M,IE是10M。 可以用这个来测http://dev-test.nemikor.com/web-storage/support-test/ 。
- 请求时不会带web stroge的内容。
Web Storage 提供的客户端存储数据的方法
包括localStorage和sessionStorage。他们都只能读写当前域的数据,区别是,localStorage存储的数据不会过期,sessionStorage存储的数据每次关闭浏览器后都会被清空。
ps:
- 现在很多浏览器都提供了“匿名访问”,“安全模式”,“隐身窗口”等等功能。在这种情况下,浏览器都是会重新建立一个新的localStorage,所以这些模式下的页面是没法访问在正常模式下的页面中的数据。
- 曾经,Firefox支持globalStorage:能读写所有域的存储数据的localStorage。但globalStorage没有成为标准。Firefox 13.0后被废弃了。更多见https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage 。
用法
localStorage和sessionStorage的api是一样的。这里以localStorage为例
写
/*
* value会被调用 .toString方法转化成字符串。因此,如果要储存的对象,调用JSON.stringify(obj)来序列化成字符串
*/
localStorage.setItem('key', 'value');
读
localStorage.getItem('key');
localStorage.key(index);//localStorage数组中下标是index的key
删除
localStorage.removeItem('key');//删除某一个localStorage
localStorage.clear();//清空所有localStorage
遍历
var output = "LOCALSTORAGE DATA:\n------------------------------------\n";
if (window.localStorage) {if (localStorage.length) {for (var i = 0; i < localStorage.length; i++) {output += localStorage.key(i) + ': ' + localStorage.getItem(localStorage.key(i)) + '\n';}} else {output += 'There is no data stored for this domain.';}
} else {output += 'Your browser does not support local storage.'
}
console.log(output);
浏览器支持
IE8+,Firefox 28.0+,chrome 33.0+,Safari 7.0+。更多支持的浏览器见http://caniuse.com/#search=Storage
更多
- web sql Database
- ie储存数据的方式:userData之类
ps:更多html5相关的知识见 http://iamjoel.github.io/learn-html5/
转载于:https://www.cnblogs.com/shijiezhenmei/p/4343470.html
Web存储(Web Storage)介绍相关推荐
- web存储(Storage)
目录 1.基本概念 2.功能监测 2.1 测试可用性 2.W3C标准 3.基本方法或属性 4. Local Storage 4.1 描述 4.2 示例 5.sessionStorage 5.1 描述 ...
- jQuery web存储 详解
写在本章开始前: 第十七章作为独立的一章,涉及到jQuery的方方面面,是篇幅很长的一章.为了更新客户端存储(本章),特跳过十七章.(十七章将在本章完成后继续更新,望大家关注.) web应用允许 ...
- HTML5 Web存储(Web Storage)技术以及用法
使用HTML5可以在本地存储用户的浏览数据.早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以 ...
- html5移动web开发简答题,HTML5移动Web开发简单知识点介绍
原标题:HTML5移动Web开发简单知识点介绍 1 :基于HTML5的移动Web应用 Canvas绘图:通过获取HTML中的Dom元素Canvas,调用其渲染上下文的Context对象,使用Js进行图 ...
- web存储详解(cookie、sessionStorage、localStorage、indexedDB)
目录 一.web存储概念简介 1. 什么是web存储? 2. 为什么需要web存储? 二.web存储详解 1. cookie 2. sessionStorage和localStorage (1). 相 ...
- HTML5 - Web存储使用详解(本地存储、会话存储)
1,Web存储介绍 HTML5的Web存储功能是让网页在用户计算机上保存一些信息.Web存储又分为两种: (1)本地存储,对应 localStorage 对象.用于长期保存网站的数据,并且站内任何页 ...
- 适合0基础的web开发系列教程-web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- Web存储机制—sessionStorage,localStorage使用方法
基本概念 Web Storage 包含两种机制: sessionStorage为每一个给定的源维持一个独立的存储区域,该区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复) lo ...
- js客户端存储之Web存储
WEB存储 客户端存储有几种方式,WEB存储就是其中一种.最初作为H5的一部分被定义成API形式,后来被剥离出来作为独立的标准.所描述的API包含localStorage对象和sessionStora ...
- 【HTML5】Web存储、通信、地理位置
Web存储 cookie 存储在浏览器中,每次浏览器向服务器发送请求都需要携带cookie.一般情况下,cookie是产生于服务器端,保存于客户端,但是我们也可以通过js来产生cookie.(cook ...
最新文章
- Magento用的哪个php框架,对magento MVC框架的了解
- css检测,CSS检测工具 CSS Lint简介
- stm32f429vref怎么接_STM32如何通过内部VREF得到实际的VDDA值
- 汇编学习的安装DOSBOX及debug.exe教程
- eclipse web项目中css无法显示
- Python-使用jmespath来格式化处理json数据
- oracle表结构迁移麻不麻烦_干货分享 | 手把手教你get数据库迁移的正确姿势
- oracle rman是干嘛的,我对Oracle RMAN备份的理解
- 标准音阶及常用乐器频率范围对照表(完全版)
- 扣费克星 1.72 更新说明
- android 微信跨境支付,微信跨境支付已在超过49个境外国家和地区合规接入
- 在家做什么小生意赚钱,这6种最适合在家操作!
- Microsoft Word 教程「6」,如何在 Word 中插入艺术字?
- 海思对接索尼ECX334 RGB OLED屏总结
- 阿拉丁和神灯的故事(二)
- Android 反编译APK详解
- 证明HashSet不是线程安全
- org.hibernate.MappingException: Unknown entity: dxm.com.vo.User
- 【微服务】6、一篇文章学会使用 SpringCloud 的网关
- 极家装修怎么样?擅长装修简约风吗?
热门文章
- pat A1032:sharing 题解(简单静态链表)
- take android,Protake
- 自动驾驶 2-2 硬件配置设计 Hardware Configuration Design
- 倍增(LCA与ST表)
- kibana如何使用linux命令,Kibana 用户指南(安装Kibana)
- python无法打开txt_在Python中打开“.txt”文件
- 2021-09-0723. 合并K个升序链表
- 2021-09-02最小栈
- mysql恢复备份快照_MySQL备份恢复:磁盘LVM快照
- POST 和GET传输的最大容量分别是多少?