HTML5 使用localstorage 本地存储
HTML 本地存储介绍
最早的 Cookies 自然是大家都知道,问题主要就是太小,大概也就 4KB 的样子,而且 IE6 只支持每个域名20个cookies,太少了。优势就是大家都支持,而且支持得还蛮好。很早以前那些禁用 cookies 的用户也都慢慢的不存在了,就好像以前禁用 javascript 的用户不存在了一样。 userData 是 IE 的东西,垃圾。现在用的最多的是 Flash 吧,空间是 Cookie 的25倍,基本够用。再之后 Google 推出了 Gears,虽然没有限制,但不爽的地方就是要装额外的插件(没具体研究过)。到了 HTML 5把这些都统一了,官方建议是每个网站 5MB,非常大了,就存些字符串,足够了。比较诡异的是居然所有支持的浏览器目前都采用的 5MB,尽管有一些浏览器可以让用户设置,但对于网页制作者来说,目前的形势就 5MB 来考虑是比较妥当的。 支持的情况如上图,IE 在 8.0 的时候就支持了,非常出人意料。不过需要注意的是,IE、Firefox 测试的时候需要把文件上传到服务器上(或者 localhost),直接点开本地的 HTML 文件,是不行的。
HTML5 localStorage 操作使用
首先自然是检测浏览器是否支持本地存储。在 HTML5 中,本地存储是一个 window 的属性,包括 localStorage 和 sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着 session,窗口一旦关闭就没了。二者 用法完全相同。这里以localStorage为例。
1 if(window.localStorage){
2 alert('浏览器支持本地存储!');
3 }else{
4 alert('浏览器不支持本地存储!');
5 }
三种设置本地存储的方法存储数据的方法就是直接给window.localStorage添加一个属性。 例如:localStorage.a 或者 localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的。
- localStorage.a = "iwanc";
- localStorage["b"] = "HTML5";
- localStorage.setItem("c","Jquery");
三种访问本地存储的方法
- localStorage.a;
- localStorage["b"];
- localStorage.getItem("c");
其他扩展
- localStorage.removeItem(); //清除
- localStorage.clear(); //清除所有
- localStorage.length; //获得多少键
- localStorage.key(); //获得存储的键内容
- localStorage.getItem(localStorage.key(0))
这里最推荐使用的自然是 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>");
}
}
写一个最简单的,利用本地存储的计数器:
$(function(){
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必须格式转换
$("#count").html("最简单的本地存储的计数器:您一共浏览了 "+storage.pageLoadCount+" 次。");
})
需要注意的是,HTML5 本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是上一段代码中 parseInt 必须要使用的原因。 在 iPhone/iPad 上有时设置setItem()时会出现诡异的 QUOTA_EXCEEDED_ERR 错误,这时一般在 setItem 之前,先 removeItem() 就ok了。 另外,目前 javascript 使用非常多的 json 格式,如果希望存储在本地,可以直接调用 JSON.stringify() 将其转为字符串。读取出来后调用 JSON.parse() 将字符串转为 json 格式,如下所示:
1 var details = {author:"iwanc","description":"HTML5","rating":100};
2 storage.setItem("details",JSON.stringify(details));
3 details = JSON.parse(storage.getItem("details"));
JSON 对象在支持 localStorage 的浏览器上基本都支持,需要注意的是IE8,它支持 JSON,但如果添加了兼容模式代码(<meta content="IE=7" http-equiv="X-UA-Compatible"/>),切换到 IE7 模式就不行了(此时依然支持localStorage,虽然显示 window.localStorage 是 [object],而不是之前的 [object Storage],但测试发现 getItem()、setItem() 等均能使用)。
HTML5 使用localstorage 本地存储的更多相关文章
- 初识html5的localStorage本地存储
一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- HTML5 LocalStorage 本地存储原理详解
首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在 ...
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- 【转】HTML5 LocalStorage 本地存储
原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...
- HTML5 LocalStorage 本地存储(转)
原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- Localstorage本地存储兼容函数
前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当 ...
随机推荐
- 【Git】 Git安装及配置
Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.而国外的GitHub和国内的Coding都是项目的托管平台. 本例使用环境:Linux环境(CentOS 7.4 ...
- 基于C#在WPF中使用斑马打印机进行打印【转】——不支持XPS的打印机
https://www.cnblogs.com/zhaobl/p/4666002.html
- Swift4.0复习类
1.类的属性: 2.类的方法: 3.类作为引用类型: “Swift新增了一对操作符 === 与 !== 用于判定同一个类的两个对象引用是否指向同一对象实例.” 摘录来自: “大话Swift 4.0”. ...
- CRC校验的问题(c语言实现CRC校验和)
1. 前面的数 7A 01 00,计算的结果是0X4920 2. 那么把数据CRC加上 3. 测试代码,计算出来的结果对不上,什么情况?可是我把参考模型的全部都选了一遍,也对不上其中一个!!! 4. ...
- Python 的包管理工具 distribute, setuptools, easy_install命令与 pip命令
Setuptools 是 Python Enterprise Application Kit (PEAK)的一个副项目,它是 Python 的disutils工具的增强工具,可以让程序员更方便地创建和 ...
- 记联想SR850 Raid配置的一个bug
管理raid阵列时,如果要删除某个指定的阵列,则需要选中阵列名而不能选中虚拟磁盘.如果选中的是虚拟磁盘,点击删除后,会删除整个阵列列表里的第一个阵列,而非虚拟磁盘所在的阵列. 过程如下 联想SR850 ...
- CF1223D Sequence Sorting
思路: 首先把数组离散化,然后观察可以发现,在最优解中最终没有被移动过的那些数字一定是连续的,那么找到最长的连续的数字长度即可. 实现: #include <bits/stdc++.h> ...
- 微信小程序之 语言特点
主页面的CSS样式默认为index.wxss,无需引入
- 配置Hive数据仓库
1.在线安装mysql服务 #下载安装mysql yum install mysql mysql-server mysql-devel #启动mysql服务 cd /etc/ init.d/mysql ...
- Java网络编程探究|乐字节
大家好,我是乐字节小乐,上次给大家讲述了Java中的IO流之输出流|乐字节,本文将会给大家讲述网络编程. 主要内容如下: 网络 网络分层 IP位置 端口port 网络编程 一. 网络 1.概念 网络即 ...