localStorage:本地永久存储
sessionStoage:本地临时存储
localStorage语法:
增加数据 localStorage.setItem('键','值')
读取数据 localStorage.getItem('键')
删除数据 localStorage.removeitem('键')
清空数据 localStorage.clear()
注意:
a.localStorage只能存放字符串格式的数据 就算你存放的是其他类型的 取出来的也是字符串
b.localStorage是本地永久存储 相当于是存在硬盘中国 就算浏览器关了也不会丢失数据
c.作用域 :当前文件夹下;也就是说如果当前文件夹下存在test1和test2,且在test1文件中使用localStorage存储一对数据,在test2文件中通过getItem方法也可以获取到的
代码
<button id="btn1">增加属性</button>
<button id="btn2">读取数据</button>
<button id="btn3">删除数据</button>
<button id="btn4">清空数据</button>
//1.增加数据
document.getElementById('btn1').onclick = function () {
localStorage.setItem('name', '王小美');
localStorage.setItem('age', 18);
localStorage.setItem('arr', [6, 655, 641, 6, 4, 0]);
}
// 2.读取数据
document.getElementById('btn2').onclick = function () {
console.log(localStorage.getItem('name'));
console.log(localStorage.getItem('age'));
console.log(localStorage.getItem('arr'));
}
// 3.删除数据
document.getElementById('btn3').onclick = function () {
localStorage.removeItem('age');
}
// 4.清空数据
document.getElementById('btn4').onclick = function () {
localStorage.clear();
}
sessionStoage语法:
增加属性:sessionStorage.setItem('键','值')
读取数据:sessionStorage.getItem('键')
删除数据:sessionStorage.removeItem('键')
清空数据:sessionStorage.clear()
注意:
a.只能存放字符串
b.临时存储 相当于存放在内存中 页面关闭那数据就没有了
c.作用域:只能是当前页面或者是通过当前页面跳转的页面
代码
//1.增加数据
document.getElementById('btn1').onclick = function () {
sessionStorage.setItem('name', '胡吃海喝的胡');
sessionStorage.setItem('age', 20);
sessionStorage.setItem('arr', [1516, 16, 655, 165, 165, 165, 1, 6516,]);
}
// 2.读取数据
document.getElementById('btn2').onclick = function () {
console.log(sessionStorage.getItem('name'));
console.log(sessionStorage.getItem('age'));
console.log(sessionStorage.getItem('arr'));
}
// 3.删除数据
document.getElementById('btn3').onclick = function () {
sessionStorage.removeItem('age')
}
// 4.清空数据
document.getElementById('btn4').onclick = function () {
sessionStorage.clear()
}
基础语法就上面那些
如果想要在本地存储中存储其他类型的值可以使用JSON格式
JSON快速入门及语法
json:javascript object notation js对象表示法
其实就是一种数据格式 本质是一个字符串
属性名必须要用双引号引起来
json数据转成js对象 | js对象转成json数据 |
JSON.parse() | JSON.stringify() |
let json1 = '[12,15,13,15,3,45]';
let json2 = '{"name":"王小美","age":18}';
let json3 = '[{"name":"王小美","age":18},{"name":"胡吃海喝的胡","age":18},{"name":"dio","age":188}]'
let obj1 = JSON.parse(json1);
let obj2 = JSON.parse(json2)
let obj3 = JSON.parse(json3)
console.log(obj1);
console.log(obj2);
console.log(obj3);
let obj1 = [12, 15, 13, 15, 3, 45];
let obj2 = { "name": "王小美", "age": 18 };
let obj3 = [{ "name": "王小美", "age": 18 }, { "name": "胡吃海喝的胡", "age": 18 }, { "name": "dio", "age": 188 }];
let json1 = JSON.stringify(obj1)
let json2 = JSON.stringify(obj2)
let json3 = JSON.stringify(obj3)
console.log(json1);
console.log(json2);
console.log(json3);
使用JSON解决存储对象的问题
<button class="btn1">存对象</button>
<button class="btn2">取对象</button>
let obj = {
name: '王小美',
age: 19,
gender: '女'
}
document.querySelector('.btn1').addEventListener('click', function () {
// 转
let json = JSON.stringify(obj)
// 存
sessionStorage.setItem('json', json)
})
document.querySelector('.btn2').addEventListener('click', function () {
// 取
let obj = sessionStorage.getItem('json');
// 转
let json = JSON.parse(obj);
console.log(json);
})
完