js本地缓存,页面传值

1、通过URL传递参数

 (1)url传递说明

url带不带参数的问题,由来已久,和提交方式有关,当用get方法,那么url就有参数。但是url的长度受限制,最大是1K的大小;当用post方法提交,那么参数就被放在了post的方法体里面。像登录,修改密码等,都是post提交,这样不会暴露个人隐私信息。即使表单提交不涉及隐私的信息,但是如果要提交一个被添了很多内容的textarea里面的内容,比如内容超过了1K,get就会罢工,不能完成这个操作。而必须用post。post方法,在url里面不放置任何东西,传递的东西都在方法体里面。

(2)url传递方法

方法一:正则分析法

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
//会乱码
  // var r = window.location.search.substr(1).match(reg); 
	// if (r != null) return unescape(r[2]); return null; 
//不乱码
	var result = window.location.search.substr(1).match(reg);
    return result?decodeURIComponent(result[2]):null;
}

调用

alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));

2、sessionStorage与localStorage

Web Storage实际上由两部分组成:sessionStorage与localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

userData

语法:

XML  <Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />

HTML  <ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>

Scripting  object .style.behavior = "url('#default#userData')"

object .addBehavior ("#default#userData")

属性:

expires 设置或者获取 userData behavior 保存数据的失效日期。

XMLDocument 获取 XML 的引用。

方法:

getAttribute() 获取指定的属性值。

load(object) 从 userData 存储区载入存储的对象数据。

removeAttribute() 移除对象的指定属性。

save(object) 将对象数据存储到一个 userData 存储区。

setAttribute() 设置指定的属性值。

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.getItem(key):获取指定key本地存储的值

localStorage.setItem(key,value):将value存储到key字段

localStorage.removeItem(key):删除指定key本地存储的值

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>");
 }
}

 

1. cookie会被附加在每个HTTP请求中,所以无形中增加了流量。

2. 由于在HTTP请求中的cookie是明文传递的,所以安全性成问题。 (除非你的整个应用都是使用SSL来构建的)
3. Cookie的大小限制在4 KB左右。 对于复杂的存储需求来说是不够用的。

 

 

转载于:https://my.oschina.net/u/1778998/blog/827814

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值