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. ASP.NET Page 指令

    一些重要的Page指令 虽然Page公开了很多属性,让我们可以在运行时调整它的状态与行为,但是,还有些重要的参数却是以“指令”方式提供的,需要在设计时就指定.下面是我整理的一些我认为 比较重要并且经常 ...

  2. oracle 10g 用dbms_xmlgen将数据表转成xml格式

    oracle 10g 用dbms_xmlgen将数据表转成xml格式 oracle 10g 用dbms_xmlgen将数据表转成xml格式 oracle用plsql将sql查询的所有数据导出为xml

  3. 论integer是地址传递还是值传递(转)

    原文链接:http://blog.csdn.net/witsmakemen/article/details/46874717 论integer是地址传递还是值传递 Integer 作为传参的时候是地址 ...

  4. timer Compliant Controller project (4)layout and gerber, paning

    1 LAYOUT 2 Gerber 3 CAM350-Paining

  5. 使用POI导出Excel(二)-利用模板

    一.基本操作见: 使用POI导出Excel 二.本次功能需求 给了一个模板,里面有6个sheet页,每页里面都需要填充相应的数据.如图: 三.需求分析 1.分了6个sheet页,每页的数据都不一样,首 ...

  6. c#TextBox输入框自动提示、自动完成、自动补全功能

    功能概览 相关属性 TextBox.AutoCompleteCustomSource 属性 获取或设置当 TextBox.AutoCompleteSource 属性设置为 [CustomSource] ...

  7. Python中的变量和常量

    本文主要介绍Python中的变量和常量,包括变量的命名规范,使用注意事项 -------------- 完美的分割线 --------------- 1.变量 1.1.变量理解 1)什么是变量 变量即 ...

  8. 《FDTD electromagnetic field using MATLAB》读书笔记 Figure 1.2

    函数f(x)用采样间隔Δx=π/5进行采样,使用向前差商.向后差商和中心差商三种公式来近似一阶导数. 书中代码: %% ---------------------------------------- ...

  9. vue-cli项目配置mock数据(新版本)

    最新的vue-webpack-template 中已经去掉了dev-server.js 但是要进行模拟后台数据的,如何模拟本地数据操作? 解决方法: dev-server.js 改用webpack-d ...

  10. Linux下软件安装方法

    1.交叉编译: ./configure --prefix=/usr/local/XXX ...... --host=armeg:./configure --prefix=/media/ubuntu/w ...