标题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带问号和& 再分割