一：localStorage是什么
localStorage是h5新增的，作用是本地存储
二：localStorage与cookie相比的优势
localStorage可以将第一次请求的数据直接存储到本地（相当于一个5兆的数据库），比cookie可以节约带宽
三：localStorage的局限
IE8以上才支持localStorage
所有浏览器的localStorage的值都是string类型，对于json类型要转换
localStorage在浏览器的隐私模式下不可读
本质上是对字符串的操作，如果存储内容过多的话会消耗空间，导致页面变卡
localStorage不能被爬虫抓取到
四：localStorage与sessionStorage的区别
唯一区别是存储的时间：
localStorage永久存储在本地，除非手动删除，否则永远存在
sessionStorage在浏览器关闭之后就删除了
五：注意事项
1、localStorage只支持string类型，保存的都是string类型，要进行类型转化
2、localStorage遵循同源策略，不同的网站不能直接共享localStorage
3、操作数据时推荐用getItem(),setItem(),deleteItem()
六：具体实现
1. 检验浏览器是否支持localStorage
if(!window.localStorage){
alert("浏览器不支持localStorage");
}else{其他操作}2. 写数据
if(!window.localStorage){
alert("浏览器不支持localStorage");
}else{ let lstorage = window.localStorage; // 三种方式写入localStorage
lstorage['name'] = "小明";
lstorage.age = 12;
lstorage.setItem("job","student"); console.log(typeof lstorage['name']) // string
console.log(typeof lstorage['age']) // string
console.log(typeof lstorage['job']) // string
// 关于打印出string类型：因为localStorage只支持string类型3. 读取数据
if(!window.localStorage){
alert("浏览器不支持localStorage");
}else{ let lstorage = window.localStorage; // 读取数据
console.log(lstorage.name) // 小明
console.log(lstorage["age"]) // 12
console.log(lstorage.getItem("job")) // student}4. 修改数据
if(!window.localStorage){
alert("浏览器不支持localStorage");
}else{ let lstorage = window.localStorage; // 修改
lstorage.setItem("name","小兰") console.log(lstorage.getItem("name")) // 小兰}5. 删除数据
// 删除
// 全部删除
lstorage.clear()
console.log(lstorage.getItem("name")) // null
console.log(lstorage.getItem("age")) // null
console.log(lstorage.getItem("job")) // null
// 删除某个键值对（假设上边的全部删除不存在）
lstorage.removeItem("name")
console.log(lstorage.getItem("name")) // null
console.log(lstorage.getItem("age")) // 12
console.log(lstorage.getItem("job")) // 小兰6. 获取key值——使用key方法获取
for(let i=0;i<lstorage.length;i++){ console.log(lstorage.key(i))
}七：具体实现
1. 输入框的值的保存与获取
<body><input type="text" id="username"><input type="password" id="password"><button id="saveDate" ="saveData()">保存数据</button><button id="getData" ="getData()">获取数据</button><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.3.1.min.js"></script><script>if(!window.localStorage){
alert("浏览器不支持localStorage")
}else{ function saveData(){ let lstorage = window.localStorage; let username = $("#username").val(); let password = $("#password").val();
lstorage.setItem("username",username);
lstorage.setItem("password",password);
alert("保存成功！")
} function getData(){ let lstorage = window.localStorage;
alert(lstorage.getItem("username"));
alert(lstorage.getItem("password"))
}
}</script></body>
作者：椰果粒
链接：https://www.jianshu.com/p/262abc079b68
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦