js部分localStorage，sessionStorage，ul传值

标题localStorage，sessionStorage，ul传值

localStorage:
b页面内容：
var str=‘hello’
var scopt=window.localStorage
scopt[str]=‘word’
document.getElementsByTagName(‘button’)[0].onclick=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].onclick=(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带问号和& 再分割

js部分localStorage，sessionStorage，ul传值

标题localStorage，sessionStorage，ul传值

猜你喜欢