HTML 5 Web 存储
HTML5 提供了两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
html5 web storage的浏览器支持判断
要判断浏览器是否支持localStorage可以使用下面的代码:
if(window.localStorage){
alert("浏览支持localStorage")
}else{alert("浏览暂不支持localStorage") }
//或者
if(typeof window.localStorage == 'undefined')
{alert("浏览暂不支持localStorage") }
localStorage和sessionStorage操作
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存储value
http://hovertree.com/menu/html5/
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:sessionStorage.setItem("key", "value"); localStorage.setItem("site", "xiao");
getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:sessionStorage.clear(); localStorage.clear();
其他操作方法:点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
推荐:http://www.cnblogs.com/roucheng/p/texiao.html
HTML 5 Web 存储的更多相关文章
- html5的web存储
在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...
- 临时存存储页面上的数据---Web存储
HTML5 Web存储的两种方法使用 localStorage和sessionStorage 参考: http://www.cnblogs.com/taoweiji/archive/2012/12/0 ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- 【html5】Web存储_locaStorage对象的应用
Web存储 html5可以在本地存储用户浏览的数据,数据的存储原理是以 键/值 存储的 存储对象分类 localStorage:没有时间限制的数据存储 sessionStorage:针对一个会话的数据 ...
- 【高级功能】使用Web存储
Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS: ...
- 【温故而知新-Javascript】使用Web存储
Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS: ...
- Web存储(Web Storage)的浏览器支持情况
所有很酷的功能特征的出现最关键的就是浏览器的支持情况,幸运的是,所有的现代浏览器都支持HTML5 Web存储(Web Storage),从IE8开始也支持它.HTML5 Web存储(Web Stora ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...
- Web存储(Web Storage)介绍
Web存储即在客户端存储数据. 在没有Web Storage之前,是通过cookie来在客户端存储数据的.但是由于 浏览器能存cookie数比较少.如IE8,Firefox,opera每个域可以保存的 ...
随机推荐
- 如何在JavaScript中正确引用某个方法(bind方法的应用)
在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...
- [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之材质了解Materials
[我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之材质了解Materials 既上一篇分享了中文字幕的灯光介绍Lights后,本篇分享一下第3个已完工 ...
- 《OOC》笔记(2)——C语言实现trycatchfinally
本篇就偷个懒吧,实在打不起精神. #ifndef _TRY_THROW_CATCH_H_ #define _TRY_THROW_CATCH_H_ #include <stdio.h> #i ...
- Winform文件下载之WebClient
最近升级了公司内部使用的一个下载小工具,主要提升了下面几点: 1. 在一些分公司的局域网中,连接不上外网 2. 服务器上的文件更新后,下载到的还是更新前的文件 3. 没有下载进度提示 4. 不能终止下 ...
- Flex小结
参考两篇文章 文章1 文章2 容器用display: flex;或display: inline-flex;指定为弹性Flex布局.采用Flex布局的元素,称为Flex容器(flex containe ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- Redis教程(十五):C语言连接操作代码实例
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/143.html 在之前的博客中已经非常详细的介绍了Redis的各种操作命令 ...
- maven+svn忽略提交到svn的文件
- Android属性动画之第一重修炼总结
经过这两天对ObjectAnimator属性动画的学习,基本对Android提供的属性动画有了一定的认识,现在就为大家以一个类似扇形打开的效果做总结. 效果图: 下面就让我们用刚刚学到的属性动画效果, ...
- 微信开发 -- 搭建基于ngrok的微信本地调试环境
第一步,安装ngrok客户端 (1)首先先到官网下载个客户端 http://natapp.cn/,选择适合的客户端类型,本人选择的是windows版 (2)下载后,解压,可以看到如下目录: 第二步,开 ...