web基于浏览器的本地存储方法应用

在客户端存储数据时，我们一般都用cookie(不敏感数据)，但是在客户端越来越富的今天，cookie可存储的量(每个域最大4k)实在是小。
在HTML5中有localStorage可使用，但是这就抛弃了IE8-。为了兼容，我们可以翻出IE很久以前就搞的一个存储方法：
给一个元素添加一个特殊的样式url(#default#userData)，之后就可以通过setAttribute和getAttribute来存取键值对形式的数据了。
要注意的一点就是在数据改变后要使用save方法，而数据加载初期要load。
接下来就贴上使用方法，当使用的浏览器支持HTML5时，就使用localStorage。


代码如下:

var localStorage = (function(db) {
if (typeof db.clear == "function") {
return db;
}
var database = document.createElement("div")
database.id = "database";
database.style.behavior = "url(#default#userData)";
document.body.appendChild(database);
database.load("DataStore");
return {
setItem: function(key, val) {
database.setAttribute(key, val);
database.save("DataStore");
}
, getItem: function(key) {
return database.getAttribute(key);
}
, removeItem: function(key) {
database.removeAttribute(key);
database.save("DataStore");
}
};
} (localStorage || {}));

不过就算兼容了 还是会有问题存在，例如在IE上存储的信息，通过Chrome打开时就获取不到了。

赞 (0)

相关推荐

  • web基于浏览器的本地存储方法应用

    在客户端存储数据时,我们一般都用cookie(不敏感数据),但是在客户端越来越富的今天,cookie可存储的量(每个域最大4k)实在是小. 在HTML5中有localStorage可使用,但是这就抛弃了IE8-.为了兼容,我们可以翻出IE很久以前就搞的一个存储方法: 给一个元素添加一个特殊的样式url(#default#userData),之后就可以通过setAttribute和getAttribute来存取键值对形式的数据了. 要注意的一点就是在数据改变后要使用save方法,而数据加载初期要l

  • Java Web基于Session的登录实现方法

    本文实例讲述了Java Web基于Session的登录实现方法.分享给大家供大家参考,具体如下: package cn.com.login; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpSer

  • js浏览器本地存储store.js介绍及应用

    store.js - 轻松实现本地存储(LocalStorage) store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globalStorage 或者 userData 来实现本地存储功能. store.js 提供非常简洁的 API 来实现跨浏览器的本地存储功能: 复制代码 代码如下: store.set('username', 'marcus') stor

  • js仿微博实现统计字符和本地存储功能

    js仿微博实现统计字符和本地存储功能

    随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了. 相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了. 例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数. 有一句话我们要牢记在心的是:凡是输入,必有限制:凡是输入,必须校验

  • JS实现本地存储信息的方法(基于localStorage与userData)

    本文实例讲述了JS实现本地存储信息的方法.分享给大家供大家参考,具体如下: WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题. sessionStorage与localStorage Web Storage实际上由

  • JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】

    本文实例讲述了JavaScript实现写入文件到本地的方法.分享给大家供大家参考,具体如下: 工作中有时需要通过 JavaScript 保存文件到本地,我们都知道 JavaScript 基于安全的考虑,是不允许直接操作本地文件的. IE 可以通过 VB 插件的方式进行,而 Chrome 和 firefox 都不支持 JavaScript 向本地写入文件,所以 VB 插件的方式存在兼容性问题. 那有没有适合的方法呢?答案是肯定的,我们可以通过 FileSaver.js 这个小插件实现我们的需求.下

  • 基于JAVA文件中获取路径及WEB应用程序获取路径的方法

    1. 基本概念的理解 `绝对路径`:你应用上的文件或目录在硬盘上真正的路径,如:URL.物理路径 例如: c:/xyz/test.txt代表了test.txt文件的绝对路径: http://www.sun.com/index.htm也代表了一个URL绝对路径: `相对路径`:相对与某个基准目录的路径,包含Web的相对路径(HTML中的相对目录). 例如: 在Servlet中,"/"代表Web应用的根目录,和物理路径的相对表示. 例如: "./"代表当前目录,&quo

  • 详解基于本地存储的kvm虚拟机在线迁移

    kvm虚拟机迁移分为4种 (1)热迁移基于共享存储 (2)热迁移基于本地存储 (3)冷迁移基于共享存储 (4)冷迁移基于本地存储 这里介绍的是基于本地存储的热迁移 动态块迁移版本要求 qemu版本要求  大于或等于0.12.1(centos6.7或以上都没问题) rpm -qa|grep qemu qemu-kvm-0.12.1.2-2.491.el6_8.1.x86_64 qemu-kvm-tools-0.12.1.2-2.491.el6_8.1.x86_64 目标宿主机:192.168.1.

  • 基于js 本地存储(详解)

    在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全) 1.JS中的本地存储: 使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息 本地存储的方案: 传统: cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的) session:把信息存储到服务器上的(服务器存储) HTML5:webStorage localStorage:永久存储在客户端的本地 s

  • web 开发之创建本地文件夹的实现方法

    web 开发之创建本地文件夹的实现方法 filemanage_util.fullPath 就是创建文件的路径 这是跨平台的创建文件夹,不像Android那样还要通过 Environment.getExternalStorageDirectory() 的原生代码来创建 实现代码: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // alert('onde

随机推荐