js部分localStorage,sessionStorage,ul传值

标题localStorage,sessionStorage,ul传值

localStorage:
b页面内容:
var str=‘hello’
var scopt=window.localStorage
scopt[str]=‘word’
document.getElementsByTagName(‘button’)[0].οnclick=function(){
window.location.href=’./a.html’
}

a页面内容:
console.log( localStorage.getItem(‘hello’))
相关方法:
// 清空
localStorage.clear()
// 添加或设置数据
localStorage.setItem(‘code’,str)
// 获取数据
localStorage.getItem(‘code’)
// 删除
localStorage.removeItem(‘code’)//删除本条数据

关于localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信。通过一个页面将值利localStorage.setItem(k,value)存入localStorage,在另一个页面中用localStorage.setItem(k,value)或者localStorage.setItem(k) 获取键值对或只是值时,这个键值对会保存在application下的localStorage中,永久保存。就算直接重新打开a页面,这个键值对还是存放在指定位置,除非运用clear或者remove方法清除相关属性。

当传入对象或数组的时候要先转化为字符串形式传入,在取出的形式再转化为js对象取出,如下:
*

***var text={
        'name':'yq',
        'code':'1111'
    }
    // 在b页面先转化为字符串 传入localStorage
    var obj=JSON.stringify(text)
    localStorage.setItem('obj',obj)

//在a页面取出obj对应的value值,转化为js对象对象形式再输出
var newObj=localStorage.getItem(‘obj’)

    // 从localStorage取出要先转化为js对象
    newObj=JSON.parse(newObj)
    console.log(newObj)****

2.sessionStorage方法:
在一个页面跳转到另一个页面的时候这个键值对会被保存在application中,但是如果跳转的那个页面在另一个窗口中被打开,没有这个键值对。
方法: // 清空
sessionStorage.clear()
// 添加或设置数据
sessionStorage.setItem(‘code’,str)
// 获取数据
sessionStorage.getItem(‘code’)
// 删除
sessionStorage.removeItem(‘code’)//删除本条数据

3.var str=‘aaaa’
document.getElementsByTagName(‘button’)[0].οnclick=(function(){
window.location.href=’./b.html?’+‘code’+’=’+str ///地址:外卖模板/url传值/b.html?code=aaaa
})

利用url拼接字符串的形式,在跳转到另一个页面的时候这些信息会包含在跳转页面的url地址中,利用分隔字符串形式获取地址中有效值,一般地址中?拼接开头,&连接,如下分隔

跳转页面对数据进行处理获取有效值:
var url=location.href;
// console.log(url)
// 再遍历字符串取到参数数组 ?后面内容
var parms=url.split(’?’)//分隔?前后内容
// console.log(parms[1])
var parm=parms[1].split(’&’)
// console.log(parm)//[“code=aaaa”] ?和&都没有了
// 用a页面传过来的数据
for(var i=0;i<parm.length;i++){
var str=parm[i]
console.log(str)
var strArr=str.split(’=’);
var parmVal=strArr[1]
console.log(parmVal)//最终用的数据
//创建标签获取数据渲染页面
var node=document.createElement(‘span’)
node.innerHTML=parmVal
contaner.appendChild(node)//传入数据aaaa
}
// 法二
var parm=location.search;
console.log(parm) //?code=aaaa带问号和& 再分割

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值