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的更多相关文章

  1. HTML5 的web储存: localStorage & sessionStorage

    早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...

  2. iOS开发和localStorage/sessionStorage

    一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5 ...

  3. cookie, localStorage, sessionStorage区别

    cookie 有过期时间,默认是关闭浏览器后失效,4K,兼容ie6,不可跨域,子域名会继承父域名的cookielocalStorage 永不过期,除非手动删除,5M,兼容IE8,不可跨域,子域名不能继 ...

  4. localstorage,sessionstorage使用

    今天看了一下HTML5,也算是简单的学习一下吧,HTML5 提供了两种在客户端存储数据的新方法:localstorage,sessionstorage. localStorage - 没有时间限制的数 ...

  5. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  6. localStorage sessionStorage 和cookie等前端存储方式总结

    localStorage sessionStorage 和cookie localStorage localStorage是本地存储的,除非清空本地数据 localStorage不会自动把数据发给服务 ...

  7. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  8. localStorage sessionStorage 增强版

    1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多 2. 增强了setItem方法 ...

  9. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  10. js中cookie,localStorage(sessionStorage)的存取

    一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...

随机推荐

  1. IOS-组件化架构漫谈

    本文作者: 伯乐在线 - 刘小壮 .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 前段时间公司项目打算重构,准确来说应该是按之前的产品逻辑重写一个项目

  2. Beta阶段第2周/共2周 Scrum立会报告+燃尽图 11

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制:https://git.coding.net/liuyy08 ...

  3. Promise的并行和串行

    Promise 并行 这个功能Promise自身已经提供,不是本文的重点.主要是依赖Promise.all和Promise.race. Promise.all是所有的Promise执行完毕后(reje ...

  4. 1028:Ignatius and the Princess III

    本题应该有两种方法: 1.母函数法 2.递推法 母函数不了解,待充分了解之后,再进行补充! 这里为递推实现的方法: 思路: 定义:n为要拆分的整数: k为拆分的项数: f[n][k]代表 n的整数拆分 ...

  5. cypress 端到端测试框架试用

    cypress 包含的特性 端到端测试 集成测试 单元测试 安装 yarn add cypress --dev 运行测试项目 初始化项目 yarn init -y 安装cypress yarn add ...

  6. LeetCode OJ - Best Time to Buy and Sell Stock

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xiezhihua120/article/details/32939749 Say you have ...

  7. Zabbix 报警通知邮件和微信vim /etc/hosts

    1安装 sendmail # yum -y install sendmail echo 'This is test mail'>body.txt mail -s 'Test mail' 3013 ...

  8. SpringCloud初体验:二、Config 统一配置管理中心

    Spring Cloud Config : 配置管理工具包,让你可以把配置放到远程服务器,集中化管理集群配置,目前支持本地存储.Git以及Subversion. 配置中心也区分为服务端和客户端,本次体 ...

  9. app测试笔记记录

    1. 個性簽名保存成功,toast提示“儲存成功” 解释:  Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过 ...

  10. 学习笔记之Python 3 教程

    Python 3 教程 http://www.runoob.com/python3/python3-tutorial.html Python的3.0版本,常被称为Python 3000,或简称Py3k ...