localStorage 本地存储技术
本地存储技术,“不是永久的永久存储”
特点:
将数据存储到浏览器当中
存储的数据都是以字符串的形式存储的
和传统的数据库相比:
优点:
操作简单,容易学习
数据直观,以最常见的key:value的形式进行存储
数据默认只可以在同源的状态下查看和存储
window.localStorage 意味着storage这项技术依赖于浏览器。
本地存储技术是属于window对象的 顶层对象可以省略不写
本地存储和cookie的区别:
就是加强版的cookie,更加的安全,同源的状态下才能查看存储的数据,存取文件更加的安全
本地存储的基础的api:
setItem('key','value')
getItem('key','value')
removeItem('key')
clear()
.length 获取长度值
// 存储
localStorage.setItem('name','admin');
localStorage.setItem('test',true); // 获取
let info = localStorage.getItem('test');
console.log(info); let info = localStorage.removeItem('test')
console.log(info); console.log(localStorage.getItem('name')); // 如果查不到内容,返回null.如果存在,返回key对应的value // 获取长度
console.log(localStorage.length)
// 清空
let info = localStorage.clear();
console.log(info)
本地存储的API
1.保存数据到本地
const info ={
name:'dongdong',
age:"23",
id:"007"
};
localStorage.setItem('key',JSON.stringify(info));
2.从本地存储拿到数据
var data =JSON.parse(localStorage.getItem('key'))
console.log(data);
3.本地存储中删除某个保存的数据
localStorage.removeItem('key');//删除了key值为key的那条数据
4.删除所有保存的数据
localStorage.clear()//删除所有保存的数据
5.监听本地存储的变化
Storage 发生变化(增加、更新、删除)时触发,同一个页面发生的改变不会触发,之会监听同一个域名下面其他页面改变Storage
window.addEventListener('storage',function(e){
console.log("key",e.key);
console.log("oldValue",e.oldValue);
console.log("newValue",e.newValue);
console.log("url",e.url);
})