一：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" onclick="saveData()">保存数据</button>
<button id="getData" onclick="getData()">获取数据</button>
<script src="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>
网友评论