localStorage,sessionStorage
h5的本地存储.
现代浏览器普遍开始支持H5本地存储,localStorage、sessionStorage。可以用来代替cookie的一部分存储功能,他比cookie存储量更大。比较实用。
两者用法类似。localStorage存储,如果不清除那么一直存在;sessionStorage是在一个会话级别上存在,如果会话关闭,那么就没了。顾名思义吧。
他们存值都是以键值对形式存在,值也是存入字符串类型(如果是对象,就序列化以后再存入)。几乎和memcached,redis这种一样。很好理解。
以下简单演示下增删改查的用法:

<script type="text/javascript">
if(window.sessionStorage){
alert('ok');
}else{
alert('fail');
}
// 设置值
sessionStorage.setItem('key_a', 1);
// 取值
var key_a = sessionStorage.getItem('key_a');
console.log(key_a);
// 删除
sessionStorage.removeItem('key_a');
console.log(sessionStorage.getItem('key_a'));// null
sessionStorage.setItem('key_b', 1);
sessionStorage.setItem('key_c', 2);
// 清除所有键值
sessionStorage.clear();
console.log(sessionStorage.key_b);
console.log(sessionStorage.key_c);
console.log('==================');
// 设置值和取值也可以使用.符号,类似于取对象属性
// 设置值
sessionStorage.key_d = 12;
// 取值
var key_d = sessionStorage.key_d;
console.log(key_d);
// 有个小区别,如果这个key没有了。一个返回值undefined,一个是null
console.log(sessionStorage.key_null);// undefined
console.log(sessionStorage.getItem('key_null'));// null
console.log('==========简单演示一个存放对象的例子========');
var obj = {
a : 12,
b : [1,2,3,4,5],
c : {
x : 'a',
y : ['bb', 12, 'cc', {a:1,b:2}],
z : 1333
}
};
sessionStorage.setItem('page', JSON.stringify(obj));
// 取值
var page = JSON.parse(sessionStorage.getItem('page'));
console.log(page);
// 遍历下数组
for(var i=0;i< page.b.length;i++){
console.log(page.b[i]);
}
// 遍历对象,通常用in
for(var j in page.c){
console.log(page.c[j])
}
// 删除key
sessionStorage.removeItem('page');
</script>
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 ...
随机推荐
- IOS-组件化架构漫谈
本文作者: 伯乐在线 - 刘小壮 .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 前段时间公司项目打算重构,准确来说应该是按之前的产品逻辑重写一个项目
- Beta阶段第2周/共2周 Scrum立会报告+燃尽图 11
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制:https://git.coding.net/liuyy08 ...
- Promise的并行和串行
Promise 并行 这个功能Promise自身已经提供,不是本文的重点.主要是依赖Promise.all和Promise.race. Promise.all是所有的Promise执行完毕后(reje ...
- 1028:Ignatius and the Princess III
本题应该有两种方法: 1.母函数法 2.递推法 母函数不了解,待充分了解之后,再进行补充! 这里为递推实现的方法: 思路: 定义:n为要拆分的整数: k为拆分的项数: f[n][k]代表 n的整数拆分 ...
- cypress 端到端测试框架试用
cypress 包含的特性 端到端测试 集成测试 单元测试 安装 yarn add cypress --dev 运行测试项目 初始化项目 yarn init -y 安装cypress yarn add ...
- LeetCode OJ - Best Time to Buy and Sell Stock
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xiezhihua120/article/details/32939749 Say you have ...
- Zabbix 报警通知邮件和微信vim /etc/hosts
1安装 sendmail # yum -y install sendmail echo 'This is test mail'>body.txt mail -s 'Test mail' 3013 ...
- SpringCloud初体验:二、Config 统一配置管理中心
Spring Cloud Config : 配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储.Git以及Subversion. 配置中心也区分为服务端和客户端,本次体 ...
- app测试笔记记录
1. 個性簽名保存成功,toast提示“儲存成功” 解释: Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过 ...
- 学习笔记之Python 3 教程
Python 3 教程 http://www.runoob.com/python3/python3-tutorial.html Python的3.0版本,常被称为Python 3000,或简称Py3k ...