JS-本地存储
Posted cuter、
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS-本地存储相关的知识，希望对你有一定的参考价值。
一、本地存储
1.本地存储里面只能村粗字符串的数据格式，把我们数组对象转换为字符串格式 json.stringify（）
2.获取本地存储的数据，我们需要把里面的字符串数据转换为对象格式 json.parse（）
<script>
var todolist = [{
title: '我今天吃八个馒头',
done: false
}, {
title: '我今天学习jq',
done: false
}, ];
// localStorage.setItem("todo", todolist);
// 1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
localStorage.setItem("todo", JSON.stringify(todolist));
var data = localStorage.getItem("todo");
// console.log(typeof data);
// console.log(data[0].title);
// 2. 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
data = JSON.parse(data);
console.log(data);
console.log(data[0].title);
</script>
二、window.sessionStorage
<body>
<input type="text" name="" id="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var input = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
set.addEventListener('click', function() {
//当我们点击之后就把表单里面值存储起来
var val = input.value;
sessionStorage.setItem('uname', val);
})
get.addEventListener('click', function() {
//当我们点击之后就把表单里面值存储起来
// var val = input.value;
var num = sessionStorage.getItem('uname');
console.log(num);
})
remove.addEventListener('click', function() {
sessionStorage.removeItem('uname');
})
</script>
</body>
三、window.localStorage
<input type="text" name="" id="">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="del">清空所有数据</button>
<script>
var input = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');
set.addEventListener('click', function() {
localStorage.setItem('username', input.value)
})
get.addEventListener('click', function() {
console.log(localStorage.getItem('username'));
})
remove.addEventListener('click', function() {
localStorage.removeItem('username');
})
del.addEventListener('click', function() {
localStorage.clear();
})
</script>
记住用户名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="inp">
<input type="checkbox" name="" id="pwd">记住用户名
<script>
var input = document.getElementById('inp');
var pwd = document.getElementById('pwd');
if (localStorage.getItem('username')) {
input.value = localStorage.getItem('username');
pwd.checked = true;
}
pwd.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('username', input.value);
} else {
localStorage.removeItem('username')
}
})
</script>
</body>
</html>
以上是关于JS-本地存储的主要内容，如果未能解决你的问题，请参考以下文章