浅析localstorage、sessionstorage
原文链接:http://caibaojian.com/localstorage-sessionstorage.html
简介
html5 中的 web Storage 包括了两种存储方式:sessionStorage 和 localStorage。 sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,会话结束后数据也随之销毁。localStorage 用于存储一个域名下的需要永久存在在本地的数据,这些数据可以被一直访问,直到这些数据被删除。因此sessionStorage 和 localStorage 的主要区别在于他们存储数据的生命周期,sessionStorage 存储的数据的生命周期是一个会话,而 localStorage 存储的数据的生命周期是永久,直到被主动删除,否则数据永远不会过期的。
Web Storage 和 cookie 的异同点及优劣势
Web Storage 和 cookie 有许多相同之处:
- 它们都可以用于存储用户数据
- 它们存储数据的格式都是字符串形式
- 它们存储的数据都有大小限制
Web Storage 和 cookie 也有不同之处:
- 它们的生命周期不同。sessionStorage 的生命周期是一个会话,localStorage的生命周期是永久,cookie 的生命周期可以自定义,cookie 可以设置过期时间,数据在过期时间之前可以访问。
- 它们的存储大小限制不同。大部分现代浏览器 Storage 的存储限制大小为 5M,cookie 的存储大小限制 为 4K。
- 浏览器支持不同,API 调用方式不同。
相比 cookie ,Web Storage 的优点主要表现在存储空间更大,可存储的内容更大。cookie每次都随请求数据发送到服务器端,Web Storage不会和请求数据一同发送到服务器端,占用带宽更少。缺点主要表现在,现在所有浏览器都支持 cookie 操作,而只有现在浏览器才支持 Web Storage 操作,如果需要兼容老旧浏览器,就不能使用 Web Storage。
Web Storage API
localStorage 和 sessionStorage 有着统一的API接口,这为二者的操作提供了极大的便利。下面以 localStorage 为例来介绍一下 API 接口使用方法,同样这些接口也适用于 sessionStorage。·
- 添加键值对:localStorage.setItem(key, value)
setItem
用于把值 value 存储到键key上,除了使用setItem
,还可以使用localStorage.key = value
或者localStorage['key'] = value
这两种形式。另外需要注意的是,key和value值必须是字符串形式的,如果不是字符串,会调用它们相应的toString()
方法来转换成字符串再存储。当我们要存储对象是,应先转换成我们可识别的字符串格式(比如JSON格式)再进行存储。
// 把一个用户名(lilei)存储到 name 的键上
localStorage.setItem('name', 'lilei');
// localStorage.name = 'lilei';
// localStorage['name'] = 'lilei';
// 把一个用户存储到user的键上
localStorage.setItem('user', JSON.stringify(id:1, name:'lilei'));
- 获取键值:localStorage.getItem(key)
getItem
用于获取键 key 对应的数据,和setItem
一样,getItem
也有两种等效形式value = localStorage.key
和value = localStorage['key']
。获取到的 value 值是字符串类型,如果需要其他类型,要做手动的类型转换。
// 获取存储到 name 的键上的值
var name = localStorage.getItem('name');
// var name = localStorage.name;
// var name = localStorage['name'];
// 获取存储到user的键上的值
var user = JSON.parse(localStorage.getItem('user'));
- 删除键值对:localStorage.removeItem(key)
removeItem
用于删除指定键的项,localStorage 没有数据过期的概念,所有数据如果失效了,需要开发者手动删除。
var name = localStorage.getItem('name'); // 'lilei'
// 删除存储到 name 的键上的值
localStorage.removeItem('name');
name = localStorage.getItem('name'); // null
- 清除所有键值对:localStorage.clear()
clear
用于删除所有存储的内容,它和removeItem
不同的地方是removeItem
删除的是某一项,而clear是删除所有。
// 清除 localStorage
localStorage.clear();
var len = localStorage.length; // 0
- 获取 localStorage 的属性名称(键名称):localStorage.key(index)
key
方法用于获取指定索引的键名称。需要注意的是赋值早的键值对应的索引值大,赋值完的键值对应的索引小,key
方法可用于遍历 localStorage 存储的键值。
localStorage.setItem('name','lilei');
var key = localStorage.key(0); // 'name'
localStorage.setItem('age', 10);
key = localStorage.key(0); // 'age'
key = localStorage.key(1); // 'name'
- 获取 localStorage 中保存的键值对的数量:localStorage.length
length
属性用于获取 localStorage 中键值对的数量。
localStorage.setItem('name','lilei');
var len = localStorage.len; // 1
localStorage.setItem('age', 10);
len = localStorage.len; // 2
Web Storage 事件
- storage 事件当存储的数据发生变化时,会触发 storage 事件。但要注意的是它不同于click类的事件会事件捕获和冒泡,storage 事件更像是一个通知,不可取消。触发这个事件会调用同域下其他窗口的storage事件,不过触发storage的窗口(即当前窗口)不触发这个事件。storage 的 event 对象的常用属性如下:
//code from http://caibaojian.com/localstorage-sessionstorage.html
oldValue:更新前的值。如果该键为新增加,则这个属性为null。
newValue:更新后的值。如果该键被删除,则这个属性为null。
url:原始触发storage事件的那个网页的网址。
key:存储store的key名
function storageChanged() {
console.log(arguments);
}
window.addEventListener('storage', storageChanged, false);
使用场景
基于 Web Storage 的特点,它主要被用于储存一些不经常改动的,不敏感的数据,比如全国省市区县信息。还可以存储一些不太重要的跟用户相关的数据,比如说用户的头像地址、主题颜色等,这些信息可以先存储在用户本地一份,便于快速呈现,等真正从服务器端读取成功后再更改头像地址,主题颜色。另外,基于 storage 事件特点,Web Storage 还可以用于同域不同窗口间的通信。
来源:前端开发博客
浅析localstorage、sessionstorage的更多相关文章
- HTML5 的web储存: localStorage & sessionStorage
早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...
- iOS开发和localStorage/sessionStorage
一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5 ...
- cookie, localStorage, sessionStorage区别
cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...
- localstorage,sessionstorage使用
今天看了一下HTML5,也算是简单的学习一下吧,HTML5 提供了两种在客户端存储数据的新方法:localstorage,sessionstorage. localStorage - 没有时间限制的数 ...
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- localStorage sessionStorage 和cookie等前端存储方式总结
localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...
- localStorage sessionStorage cookie indexedDB
目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...
- localStorage sessionStorage 增强版
1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多 2. 增强了setItem方法 ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- js中cookie,localStorage(sessionStorage)的存取
一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...
随机推荐
- cin.get(),cin.getline(),getline(),gets(),getchar()
1.cin.get() (1).cin.get()-------提取单个字符,可以提取回车.空格 a=cin.get(); (2) 同(1)---------------提取单个字符,可以提取回车.空 ...
- 创建第一个Servlet并定制Sevlet模板
我们已经为eclipse配好了Tomcat服务器,创建了Web工程,现在是时候该创建一个Servlet向世界问好了! 第一步:创建一个Web工程,选中”src“文件夹 -->单击右键,鼠标移到” ...
- Selenium-元素定位与操作
UI的自动化本质就是识别元素,操作元素,而元素的识别就是通过HTML的标签和属性,所以对于基本的HTML的只是是必备的 随着页面复杂度的提升,加之很多公司的开发也没有统一规范,这就给识别元素造成了非常 ...
- hibernate的update、merge和saveOrUpdate的区别(转)
1.首先 saveOrUpdate返回void 也就是什么都不返回 而merge会返回一个对象 2.其次 saveOrUpdate的做法是:自动判断该对象是否曾经持久化过,如果曾持久化过则使用upda ...
- L101
It isn't where you came from. It's where you're going that counts.起点并不重要,重要的是,你要去往何方.Nothing is impo ...
- 表达式计算-----------eval()运算符
1.java的eval()方法(或称之为运算符)可以将字符串解析成可以运行的javaScript代码,例如 eval()只有一个参数.如果传入的参数不是一个字符串,那么它会直接返回这个参数.如果传入的 ...
- Arc071_F Infinite Sequence
传送门 题目大意 给定一个数$n$,构造一个无限长的序列$A$,使得 $\forall i,j\geq n,A_i=A_j$ $\forall i<j<k\leq i+a_i,A_j=A_ ...
- noip退役赛
上下午 6 题一起考 自闭了 T1 小明要参加一场比赛,赛制给你一个表格 $p$ ,$p_{(i,j)}$ 表示他在第 $i$ 场比赛前如果输了 $j$ 场,他这一场赢的概率,他也可以故意输掉任意多场 ...
- bzoj 4817: [Sdoi2017]树点涂色 LCT+树链剖分+线段树
题目: Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. Bob可能会进 ...
- 使用Visual Studio进行单元测试-Part5
本文主要介绍Visual Studio(2012+)单元测试框架的一些技巧: 如何模拟类的静态构造函数 如何测试某方法被调用过 如何测试某方法执行的次数 并行编程测试注意事项 一.如何模拟类的静态构造 ...