关键词:
说在前头:
UserData:属于IE6 IE7的老东西。麻烦且体验差,暂且不表
localStorage 属于HTML5的东西,兼容IE8以及其它W3C标准的主流浏览器。所以尽可能的具体解说
注意:
IE下须要server环境。能够使用webstorm编辑器来预览,否则会报错
相关文档:
猎聘:http://www.css88.com/archives/3717
博客园:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html
博客园2:http://www.cnblogs.com/winterIce/archive/2011/09/16/2179281.html
教程:
0-----------------------------------------------------------------》相关属性方法
1-------------------------------------------------------------------》JavaScript userData localStorage的兼容
2-------------------------------------------------------------------》html 1
3.----------------------------------------------------------------------------------->>storage 跨浏览器通讯[IE8不支持]
------------------------------------------------------------------------------------------------------------------------------------------------------------
locaStorage:
增:
ocalStorage.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的值
事件:
if(window.addEventListener)
{
window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent)
{
window.attachEvent("onstorage",handle_storage);
}
function handle_storage(){
alert(LocalStorage.getItem("hehe"))
}
清除全部:
localStorage.clear();
localStorage是一个集合。有length属性。能够通过遍历来获取相应的值:
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>");
}
}
******************************我是切割线~.~********************************************
实例localStorage.js:[兼容IE6 7,用面向对象的方法写~~不知道这样表达是不是正确]:
//userData,做IE7 6 兼容
var UserData = { //新建一个UserData对象来做IE6 7的兼容,注意第一个字母大写
userData : null,//用来推断是否有userData属性,也就是推断是否是IE6 7,或者说是否支持userData属性
name : location.hostname,
init:function(){
if (!UserData.userData) {
try {
UserData.userData = document.createElement('INPUT');
UserData.userData.type = "hidden";
UserData.userData.style.display = "none";
UserData.userData.addBehavior ("#default#userData");
document.body.appendChild(UserData.userData);
var expires = new Date();
expires.setDate(expires.getDate()+365);
UserData.userData.expires = expires.toUTCString();
} catch(e) {
return false;
}
}
return true;
},
setItem : function(key, value) {//设置缓存
if(UserData.init()){
UserData.userData.load(UserData.name);
UserData.userData.setAttribute(key, value);
UserData.userData.save(UserData.name);
}
},
getItem : function(key) {//获取缓存
if(UserData.init()){
UserData.userData.load(UserData.name);
return UserData.userData.getAttribute(key)
}
},
remove : function(key) { //删除缓存
if(UserData.init()){
UserData.userData.load(UserData.name);
UserData.userData.removeAttribute(key);
UserData.userData.save(UserData.name);
}
},
clear:function(){//清除全部缓存
UserData.userData.load(UserData.name);
var now = new Date();
now = new Date(now.getTime()-1);
UserData.userData.expires = now.toUTCString();
UserData.userData.save(UserData.name);
}
};
//做W3C兼容 以及IE6 7的兼容,这里的代码是我自己參照上面的代码写的。原理一样
var LocalStorage={//新建一个LocalStorage对象
localStorage: null,//用来推断是否支持localStorage
setItem:function(key,value)
//设置缓存
{
if(!LocalStorage.localStorage)//假设支持localStorage。就使用它
{
localStorage.setItem(key,value)
}
else{ //否则使用IE6 7的userData方法,也就是上面我们写的那个UserData对象的方法,以下的代码原理一样,就不备注了
UserData.setItem(key,value)
}
},
getItem:function(key)
{
if(!LocalStorage.localStorage)
{
return localStorage.getItem(key)
}
else
{
return UserData.setItem(key);
}
},
removeItem:function(key)
{
if(!LocalStorage.localStorage)
{
return localStorage.removeItem(key)
}
else
{
return UserData.removeItem(key);
}
},
clear:function()
{
if(!localStorage)
{
return localStorage.clear();
}
else{
return
UserData.clear()
}
}
};
******************************我是切割线~.~********************************************
html:
demo.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<label for="">商品类型:<input type="text" name="name"/></label>
<label for="">标题:<input type="text" name="title"/></label>
<label for="">价格:<input type="text" name="price"/></label>
<label for=""><input type="button" value="提交" id="submit"/></label>
</form>
<script src="locaStorage.js"></script>
<script src="../jquery.js"></script>
<script>
$(function(){
var names=$("input[name='name']");
var tit=$("input[name='title']");
var price=$("input[name='price']");
var submit=$("#submit");
submit.click(function(){
//保存缓存
LocalStorage.setItem("name",names.val());
LocalStorage.setItem("title",tit.val());
LocalStorage.setItem("price",price.val());
window.location.href="demo2.html";
//读取缓存
});
//读取缓存
names.attr("value",LocalStorage.getItem("name"));
tit.attr("value",LocalStorage.getItem("title"));
price.attr("value",LocalStorage.getItem("price"));
})
</script>
</body>
</html>
图示:
无论你怎样刷新。都会保存数据
******************************我是切割线~.~********************************************
demo2.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<h1>你购买的商品例如以下:</h1>
<label for="">商品类型:<input type="text" name="name"/></label>
<label for="">标题:<input type="text" name="title"/></label>
<label for="">价格:<input type="text" name="price"/></label>
</form>
<script src="locaStorage.js"></script>
<script src="../jquery.js"></script>
<script>
$(function(){
var names=$("input[name='name']");
var tit=$("input[name='title']");
var price=$("input[name='price']");
names.attr("value",LocalStorage.getItem("name"));
tit.attr("value",LocalStorage.getItem("title"));
price.attr("value",LocalStorage.getItem("price"));
})
</script>
</body>
</html>
图示:
及时跳转到了新页面,还是能够获取到数据
区分cookie,localstorage与sessionstorage
...是通过在Cookie中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage是HTML5标准中新加入的技术,它并不是什么划时代的新东西。早在IE6时代,就有一个叫userData的东西用于本地存储,而当时考虑到浏览器兼容性,更通用... 查看详情
localstorage和sessionstorage
localStorage: 1、localStorage存储数据没有时间限制,只要不删除会一直存在 2、localStorage可以存储5M大小的数据,存在浏览器下的UserData文件夹中 3、localStorage的值类型限定为string类型,取值的时... 查看详情
localStorage 对象在 IE 中未定义
】localStorage对象在IE中未定义【英文标题】:localStorageobjectisundefinedinIE【发布时间】:2011-03-2410:49:31【问题描述】:我在我的JS应用程序中使用localStorage,我想知道为什么IE9声称localStorage==undefined。据我所知,IE8支持它,有什么办... 查看详情
html5localstorage使用方法及注意点
html5新增了在客户端存储数据的新方法:1.localStorage-没有时间限制的数据存储;2.sessionStorage-针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除。浏览器支持程度注意到,IE8以及以上版本是支持localStorage和session... 查看详情
如何从开发者工具中清除 IE10 和 IE11 中的 localStorage?
】如何从开发者工具中清除IE10和IE11中的localStorage?【英文标题】:HowtoclearlocalStorageinIE10&IE11fromdevelopertool?【发布时间】:2014-01-0318:59:16【问题描述】:我打开了IE11开发人员工具,它有很多选项,但我找不到如何清除localStorag... 查看详情
html5中的localstorage啥时候会被清空
Chrome21不清除localStorage.这个异常结果可能归结于测试结果。Chrome21清除localStorage,但是并不在当前选项卡的内存中清除。如果你切换选项卡或者是重启Chrome浏览器,则被清掉了,是从内存中也清掉了。这实际上是一个bug,Chrome... 查看详情
localstorage在ie中的那点事儿
...览器的兼容情况:很明显,在IE中,WebStorage(sessionStorageandlocalStorage)最低支持到IE8;那么问题来了,在IE8+中,兼容性真的有那么好吗?其实不然,在“强大”的IE中,安全性做的是相当到位的,想要localStorage在IE8+中发挥它... 查看详情
useEffect 不监听 localStorage
】useEffect不监听localStorage【英文标题】:useEffectdoesnotlistenforlocalStorage【发布时间】:2020-07-2510:37:12【问题描述】:我正在创建一个身份验证系统,在后端将我重定向到前端页面后,我正在为userData发出API请求,并将该数据保存到... 查看详情
js详解cookielocalstorage与sessionstorage(代码片段)
...是通过在Cookie中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage是HTML5标准中新加入的技术,它并不是什么划时代的新东西。早在IE6时代,就有一个叫userData的东西用于本地存储,而当时考虑到浏览器兼容性,更通用... 查看详情
localstorage存值取值以及存取json,以及基于html5localstorage的购物车
http://blog.csdn.net/u013267266/article/details/51530611 localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = "value"//存储变量名为key,值为 查看详情
在 IE7 和 IE6 中使用带有 localStorage 的骨干网的最佳实践是啥?
】在IE7和IE6中使用带有localStorage的骨干网的最佳实践是啥?【英文标题】:What\'sbestpracticeforusingbackbone.jswithlocalStorageforIE7andIE6?在IE7和IE6中使用带有localStorage的骨干网的最佳实践是什么?【发布时间】:2011-10-2006:36:18【问题描述... 查看详情
html5的5种存储方式详解
...介绍了前端HTML5几种存储方式的总结,主要包括本地存储localstorage,本地存储sessionstorage,离线缓存(applicationcache),WebSQL,IndexedDB。有兴趣的可以了解一下。正文开始~h5之前,存储主要是用cookies。cookies缺点有在请求头上带着... 查看详情
JavaScript localStorage 对象在 Windows 7 上的 IE11 中损坏
】JavaScriptlocalStorage对象在Windows7上的IE11中损坏【英文标题】:JavaScriptlocalStorageobjectbrokeninIE11onWindows7【发布时间】:2014-02-0423:13:27【问题描述】:InternetExplorer11(Windows7版本)中的localStorage对象包含某些函数的字符串表示形式,... 查看详情
h5中五大存储方式
...储信息的问题解决关系型存储的问题跨浏览器1.本地存储localstorage存储方式:以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手 查看详情
html5localstorage怎么取存储条数
...bsp; HTML5本地存储的前身就是Cookie,通过使用localStorage对象将WEB数据持久留存在本地。相比较而言,HTML5本地存储中每个域的存储大小默认是5M,比起Cookie的4K要大的多。而且存储和读取数据的代码极为简练: ... 查看详情
js本地存储:localstorage
一.简介 localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库 ——注意:在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储,如果存储内容多的话会... 查看详情
cookiesession和localstorage以及sessionstorage之间的区别
[转] Cookie、session和localStorage、以及sessionStorage之间的区别一、Cookie、session和localStorage的区别cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的... 查看详情
js中localstorage
...1.浏览器的大小不统一 2.IE8以上的IE版本才支持 3.localStorage的值类型限定为string类型 4.localStorage在浏览器的隐私模式下面是不可读取的 5.localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会... 查看详情