首先自然是检测浏览器是否支持本地存储。

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。

if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}

存储数据的方法就是直接给window.localStorage添加一个属性。

例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。

如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:

var storage = window.localStorage;
function showStorage(){
for(var i=0;i<storage.length;i++){
//key(i)获得相应的键,再用getItem()方法获得对应的值
document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
}
}

需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是parseInt必须要使用的原因。

localStorage和sessionStorage的更多相关文章

  1. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  2. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  3. localstorage 和 sessionstorage 本地存储

    在我们日常的工作和实际项目中,做好数据数据缓存可以是我们的程序执行效率更高,可以使我们避免重复请求 服务器,减轻服务器的压力,可以提高使用户的体验度. 那么 HTML5 存储的目标是什么? 1.解决存 ...

  4. Cookie, LocalStorage 与 SessionStorage

    Cookie, LocalStorage 与 SessionStorage相同点 都是储存在用户本地的数据. 意义在于避免数据在浏览器和服务器间不必要地来回传递. 三者的特点     同属于html5 ...

  5. localStorage与sessionStorage 的区别

    通过一枚页面计数器来区别localStorage与sessionStorage. 通过一个计数变量pageconut,每刷新页面,增加的是localStorage的数量,而sessionStorage ...

  6. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  7. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  8. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  9. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

随机推荐

  1. app微信支付(一) - 微信支付基本业务流程解析

    想必微信支付是现在很多朋友离不开的一个功能,不论是扫描支付还是公众号支付或者app端支付,基本的思路都是一样的,之前做过支付宝支付以及中国移动支付接口,这几天花时间讲讲微信支付吧 先看一下微信支付的时 ...

  2. BZOJ2429[HAOI2006]聪明的猴子[最小生成树 kruskal]

    2429: [HAOI2006]聪明的猴子 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 896  Solved: 575[Submit][Statu ...

  3. 如何配置QuickFIX/N

    Acceptor或者Initiator能够为您维护尽可能多的FIX会话,因而FIX会话标识的唯一性非常重要.在QuickFIX/N中,一个FIX会话的唯一标识是由:BeginString(FIX版本号 ...

  4. uva10160 Servicing Stations

    The input consists of more than one description of town (but totally, less than ten descriptions). E ...

  5. .Net Core 控制台输出中文乱码

    Net Core 控制台输出中文乱码的解决方法: public static void Main(string[] args)         {             Console.Output ...

  6. PAT 1028. 人口普查(20)

    某城镇进行人口普查,得到了全体居民的生日.现请你写个程序,找出镇上最年长和最年轻的人. 这里确保每个输入的日期都是合法的,但不一定是合理的--假设已知镇上没有超过200岁的老人,而今天是2014年9月 ...

  7. 经典算法和OJ网站(开发者必备-转)

    一. Online Judge简介: Online Judge系统(简称OJ)是一个在线的判题系统.用户可以在线提交程序多种程序(如C.C++.Pascal)源代码,系统对源代码进行编译和执行,并通过 ...

  8. ReactNative运行提示缺少文件xxxRootView.h解决方法

    我们经常在github获取源码后运行会出现缺少 "RCTRootView.h" notfound" 文件的错误,对于这种错误我们怎么解决了. 1.cd到项目根目录 删除项 ...

  9. JavaScript:立即执行的函数表达式

    先要理解清楚几个概念:   以下转自:http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html  问题的核心 当你声明类似functio ...

  10. 扩展欧几里得算法(extgcd)

    相信大家对欧几里得算法,即辗转相除法不陌生吧. 代码如下: int gcd(int a, int b){ return !b ? gcd(b, a % b) : a; } 而扩展欧几里得算法,顾名思义 ...