html5 Web Storage(localStorage(),sessionStorage())
Web Storage包括了两种存储方式:sessionStorage和localStorage
sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
localStorage 是持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
Web Storage与cookie异同
- cookie 支持的数据内容小,8k左右。localStorage目前能支持到10M。
 - 每次请求一个新的页面的时候Cookie都会被发送过去,浪费了带宽。
 - cookie 需要指定作用域,不可以跨域调用。
 - Web Storage 拥有setItem,getItem,removeItem,clear等方法,cookie 需要前端开发者自己封装setCookie,getCookie方法。
 
localStorage浏览器支持情况
<script type="text/javascript">
// method one
if(window.localStorage){
alert("浏览支持localStorage")
}else{
alert("浏览暂不支持localStorage")
}
// method two
if(typeof window.localStorage == 'undefined') {
alert("浏览暂不支持localStorage")
}
</script>
localStorage和sessionStorage操作
- localStorage.setItem(key,value) // 设置键值对
 - localStorage.getItem(key) // 通过键值读取对应的值
 - localStorage.removeItem(key) // 通过键值移除对应的值
 - localStorage.clear() // 初始化localStorage,清除所有键值对
 - localStorage.key(index) // 通过下标index来获取指定索引的key名
 
其他操作方法:点操作和[ ]
<script type="text/javascript">
var storage = window.localStorage;
storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);
</script>
相关:IE专属存储 UserData.
html5 Web Storage(localStorage(),sessionStorage())的更多相关文章
- HTML5存储 ——Web Storage(localStorage 和 sessionStorage)
		
一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...
 - h5本地缓存(localStorage,sessionStorage)
		
H5本地存储数据 localStorage,sessionStorage的区别: 相同点: 缓存数据比cookie的范围大; localStorage:关闭浏览器数据不会消失,除非手动删除数据 se ...
 - [web 前端]   web本地存储(localStorage、sessionStorage)
		
cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...
 - web本地存储(localStorage、sessionStorage)
		
web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...
 - web 本地存储 (localStorage、sessionStorage)
		
web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...
 - 使用HTML5 Web存储的localStorage和sessionStorage方式
		
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
 - Html5  web 本地存储 (localStorage、sessionStorage)
		
HTML5 提供了两种在客户端存储数据的新方法localStorage,sessionStorage sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在, ...
 - web存储机制(localStorage和sessionStorage)
		
web存储包括两种:sessionStorage 和 localStorage(都是限定在文档源级别,非同源文档间无法共享) 1.sessionStorage 数据放在服务器上(IE不支持) 严格用于 ...
 - HTML5 web存储之LocalStorage和sessionStorage
		
什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...
 
随机推荐
- ado.net 属性扩展 综合练习
			
实现数据查询,添加,删除,修改各项功能 业务逻辑层: using System; using System.Collections.Generic; using System.Linq; using ...
 - css限制div字符超出部分,简单有方便
			
text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-w ...
 - 20145337《Java程序设计》第四周学习总结
			
20145337<Java程序设计>第四周学习总结 教材学习内容总结 继承与多态 继承 继承,避免多个类间重复定义共同行为 符合DRY(Don't Repeat Yourself)原则,多 ...
 - PHP isset, array_key_exists配合使用, 并解决效率问题
			
如果有一个数组, $arr = array('one' => null, 'two' => 1, 'three' => 2); 问题, 如果要判断数组中'one'这个键是否存在..如 ...
 - Different Approaches for MVCC
			
https://www.enterprisedb.com/well-known-databases-use-different-approaches-mvcc Well-known Databases ...
 - 使用Notepad++代替笨拙的Arduino IDE
			
Arduino自带的IDE 太不好用了,下面是用强大,轻量级,免费,开源,丰富插件的的Notepad++编辑器来打造Arduino开发环境 . 配置过程对新生来说可能有些繁琐,但是我尽力写的很详细了, ...
 - 如何真正抓住微信小程序的红利? 阿禅知乎live总结
			
微信App定义 为满足用户某种开发需求.完全基于微信的消息或网页应用,入口是公众号,用户无需离开微信即可完成所有操作,所有需求都在公众号里被满足 微信App的优势 1. 顾客在哪里,就让顾客在哪里看到 ...
 - 【C语言学习笔记】存储类、链接和内存管理
			
因为对内存管理部分一直没有很清楚的思路,所以一直在找资料想系统看一下这部分的内容.在C primer plus里看到了这一章,虽然大多都是心知肚明的东西,但是还是很多概念性系统性的东西让我眼前一亮,把 ...
 - lleetcode 292. Nim Game
			
You are playing the following Nim Game with your friend: There is a heap of stones on the table, eac ...
 - 临时存存储页面上的数据---js中的cookie
			
实现的效果: 当点击某个按钮的时候,实现点击A的同时,弹出B的注册div,使填写在B信息数据保存下来,点击B的确定按钮,B消失,A的图标往后移动一格,原来的位置为图标C,点击C可以弹出来一个链接的页面 ...