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 UI-QQ好友列表
一.Model // // FriendsModel.h // IOS_0111_好友列表 // // Created by ma c on 16/1/11. // Copyright (c) 201 ...
- POJ 3984 迷宫问题 bfs 难度:0
http://poj.org/problem?id=3984 典型的迷宫问题,记录最快到达某个点的是哪个点即可 #include <cstdio> #include <cstring ...
- ansible入门02
1.常用模块 1.1 group模块 添加或删除组 name= state=:present(添加),absent(删除) sy ...
- 最终还是迁移到github
作为全球最大的程序员同性交友社区,github pages 吸引了我 为了有一个更好的博客的写作环境 将会把内容逐渐迁移到 github.io 地址 zongxiao.github.io 新的文章也会 ...
- Nginx 反向代理 如何在web应用中获取用户ip
转载:http://blog.csdn.net/bao19901210/article/details/52537279 问题背景: 在实际应用中,我们可能需要获取用户的ip地址,比如做异地登陆的判断 ...
- 从JDK源码角度看Short
概况 Java的Short类主要的作用就是对基本类型short进行封装,提供了一些处理short类型的方法,比如short到String类型的转换方法或String类型到short类型的转换方法,当然 ...
- 结合File类浅析递归的使用
递归算法就是方法自身直接或者间接地调用到了自身,它是一种写起来很简单,但理解起来不那么简单的算法. 一个功能在被重复地调用,并且运算的结果和上一次的调用有关, 这种时候,可以使用递归. * 注意: * ...
- 重新理理C++:从《c++ primer》开始
以前学过C++,但是感觉很多东西还是不清不楚,很多问题解决起来啃吧啃吧的.... 即使c++的东西看过,但是这本书看起来速度还是提不上去,确实需要扎实扎实.很多以前只会用的东西,这本书上都讲的很清楚, ...
- vue-cli项目配置mock数据(新版本)
最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作? 解决方法: dev-server.js 改用webpack-d ...
- nsq 安装试用
因为是mac 系统安装试用brew install nsq 安装 brew install nsq 组件说明 nsqd 守护进程进行消息的接受,缓存以及传递消息给客户端,需要配置nsqlookupd地 ...