【短平快】比记事本更好用的离线本地存储网页[念念不忘,必有返响]记事本!

879792799 · 发表于 2025-8-12 07:14:40

本帖最后由 879792799 于 2025-8-12 17:37 编辑

提醒一下千万别拿此记事本保存账户密码银行卡之类出了问题本人概不担责!!
离线本地浏览器存储是不加密的别放贵重信息!!!!仅供兴趣研究玩的!!

原帖是https://blog.csdn.net/2301_81253 ... ails/140924135-----有点问题我已修复
呵呵有好东西不分享不是我风格!!

此网页离线本地存储记事本比一般记事本方便!
最有意思部分就是这么复杂的数据存储仅仅只用到二维数组就搞定了数学真的好强大好强大啊!

大大们先让我感叹一下!太阳地下没有新鲜事,人生关键之处也就那么几步,真正重要的话也就那么几句!
所以记事本回归本质仅需要记录这几句话,真正重要的话!!长篇大论的话估计自己懒的看吧或者把自己也搞晕了.

#########################################################################

把真正重要几句的话每天重复坚持下去,此记事本助大大您念念不忘,必有返响!!
#########################################################################

祝大大们早日练成绝世武功!

假如大大你嫌删除太小(我是防误删所以设的很小!) 可以调整349行 border-right: 10px solid #FD0164;
提醒必须要有jquery.min.js 网上有!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
body {
zoom: 56%;
margin-top: 20px;
height: 1000px;
background-repeat: no-repeat;
}
.entire {
margin: auto;
width:600px;
height: 1060px;
}
.button {
border-radius: 6px;
color: #505050;
}
/* 心平气和 */
.title {
margin: auto;
width: 180px;
height: 44px;
font-size: 39px;
border-radius: 20px;
text-align: center;
margin-top: 9px;
color: #FD6600;
box-shadow: 5px 5px 15px rgb(201, 188, 198) inset, -5px -5px 10px #999999 inset;
}
.header input {
margin: auto;
text-align: center;
margin-top: 60px;
font-size: 30px;
width: 600px;
height: 69px;
border-radius: 30px;
border: none;
outline: none;
color: #505050;
box-shadow: 5px 5px 15px rgb(219, 218, 218) inset, -5px -5px 10px #999999 inset;
}
input::placeholder {
color: #505050;
font-size: 29px;
}
.tabs {
margin: auto;
margin-top: 33px;
display: flex;
text-align: center;
border-bottom: 2px solid #e7b3b3;
}
.tabs div {
margin-left: 30px;
background-color: #546171;
border: 2px solid #e7b3b3;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom: none;
font-size: 39px;
cursor: pointer;
color: #000000;
box-shadow: 5px 5px 15px rgb(250, 241, 241) inset, -5px -5px 10px #fff inset;
}
.tabs .active {
background-color: #FD9900;
}
.content {
padding-top: 0px;
}
.note {
padding-top: 20px;
margin: auto;
width:600px;
border-radius: 40px;
}
/* 设置各个tab面背景样式和文字颜色包括条目背景色*/
.note:nth-child(1) {
background-color: #fffefe;
}
.note:nth-child(2) {
background-color: #fffefe;
}
.note:nth-child(2) .center-item {
color: #ffffff;
}
.note:nth-child(3) {
background-color: #fffefe;
}
.note:nth-child(3) .center-item {
color: #ffffff;
}
.note:nth-child(4) {
background-color: #fffefe;
}
.note:nth-child(4) .center-item {
color: #ffffff;}
.note:nth-child(5) {
background-color: #fffefe;
}
.note:nth-child(5) .center-item {
color: #ffffff;;
}
/* 设置完成和未完成的框的大小和样式 */
.work-unfinished,
.work-finished,
.life-unfinished,
.life-finished,
.study-unfinished,
.study-finished,
.health-unfinished,
.health-finished,
.day-unfinished,
.day-finished {
margin: auto;
width: 600px;
border-radius: 15px;
border: #ffffff solid 3px;
}
/* 设置完成和未完成之间的间隔为20px */
.work-unfinished,
.life-unfinished,
.study-unfinished,
.health-unfinished,
.day-unfinished{
margin-bottom: 100px;
}
/* 设置完成和未完成的字体样式 */
.note-text {
margin-bottom: 15px;
width: 190px;
height: 50px;
color: #FD9900;
text-align: left;
font-size: 50px;
text-align: left;
font-weight:bold;
}
/* 完成未完成设置位置 */
.work-unfinished .note-text,
.life-unfinished .note-text,
.study-unfinished .note-text,
.health-unfinished .note-text,
.day-unfinished .note-text {
margin-left: 0px;
text-align: left;
font-size: 35px;
}
/* 完成已完成设置位置 */
.work-finished .note-text,
.life-finished .note-text,
.study-finished .note-text,
.health-finished .note-text,
.day-finished .note-text {
margin-left: 0px;
color: #505050;
text-align: left;
font-size: 35px;
}
/*条目宽度*/
.uul-unfinished,
.uul-finished {
display: block;
width: 600px;
overflow-y: hidden;
overflow-x: hidden;
}
/* 隐藏滚动条 */
.uul-unfinished::-webkit-scrollbar,
.uul-finished::-webkit-scrollbar {
width: 0;
}
/* 设置页面内各个条目的重要 */
.uul-unfinished li {
margin-top: 6px;
margin-left: -39px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
display: flex;
height: 51px;
width: 590px;
text-align: center;
font-size: 35px;
border-left: 12px solid #7BB01A;
}
.uul-finished li {
margin-top: 6px;
margin-left: -39px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
display: flex;
height: 33px;
width: 590px;
text-align: center;
font-size: 26px;
border-left: 12px solid #7BB01A;
}
/* 设置页面内各个条目的外框重要 */
.work-unfinished .uul-unfinished li,
.work-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.life-unfinished .uul-unfinished li,
.life-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.study-unfinished .uul-unfinished li,
.study-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.health-unfinished .uul-unfinished li,
.health-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.day-unfinished .uul-unfinished li,
.day-finished .uul-finished li {
box-shadow: 1px 1px 2px rgb(0, 0, 0) inset, -1px -1px 1px #000000 inset;
background-color: #505050;
}
.center-item {
width: 570px;
height: 39px;
text-align: left;
margin-left: 10px;
overflow-y: hidden;
overflow-x: hidden;
color: #ffffff;
}
/* 设置已完成文字样式*/
.uul-finished .center-item {
text-decoration: line-through;
color:#AC7F79;
}
.life-finished .uul-finished .center-item {
text-decoration: line-through;
color:#AC7F79;
}
.study-finished .uul-finished .center-item {
text-decoration: line-through;
color: #AC7F79;
}
.health-finished .uul-finished .center-item {
text-decoration: line-through;
color: #AC7F79;
}
.day-finished .uul-finished .center-item {
text-decoration: line-through;
color: #AC7F79;
}
/* 设置各个条目图标后面删除图标*/
.task-iconsan {
border-right: 10px solid #FD0164;
width:15px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 设置变签内容不可看 */
.note {
display: none;
}
/* 设置变迁内容可看 */
.content .active {
display: block;
}
/* 设置完成文字图片在一排 */
.text {
display: flex;
}
/* 每天重心开始 */
.deleteAll {
cursor: pointer;
width: 100px;
height: 50px;
margin-top: 9px;
margin-right: 10px;
}
.text img {
width: 0px;
height: 0px;
border-radius: 0px;
margin-right: 10px;
margin-left: 10px;
margin-top: 4px;
}
/*全部删除这几个字*/
.text span {
width: 120px;
height: 40px;
text-align: center;
vertical-align: middle;
color: #000000;
font-size: 20px;
padding: 4px;
border-radius: 15px;
border: 1px solid rgb(255, 217, 142);
}
</style>
<script type="text/javascript" src="./jquery.min.js"></script>
</head>
<body>
<div class="entire">
<div class="header">
<input id="task" type="text" placeholder=" 心想事成 ">
</div>
<div class="middle">
<div class="tabs">
<div class="work active" data-id="1">紧急</div>
<div class="life" data-id="2">重要</div>
<div class="study" data-id="3">兴趣</div>
<div class="health" data-id="4">长期</div>
<div class="day" data-id="5">随记</div>
</div>
<div class="content">
<div class="note active">
<div class="work-unfinished">
<div class="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="work-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="life-unfinished">
<div class="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="life-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="study-unfinished">
<div class="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="study-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="health-unfinished">
<div class="note-text">未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="health-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
<div class="note">
<div class="day-unfinished">
<div class="note-text" >未完成</div>
<ul class="uul-unfinished">
</ul>
</div>
<div class="day-finished">
<div class="text">
<div class="note-text">已完成</div>
<span class="deleteAll" style="margin-right: 79px;text-align: center;">每天重❤来</span>
</div>
<ul class="uul-finished">
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
window.addEventListener('load', function () {
// 判断到第几个note
let dataId = 1
//定义数组
if (!this.localStorage.getItem('arr')) {
localStorage.setItem('arr', "[[], [], [], [],[]]")
} else if (!this.localStorage.getItem('arr1')) {
localStorage.setItem('arr1', "[[], [], [], [],[]]")
}
const arrList1 = JSON.parse(localStorage.getItem('arr'))
const arrList2 = JSON.parse(localStorage.getItem('arr1'))
renderUnfinished()
renderFinished()
bindEventListeners()
// 如果按下了回车事件
let inputTask = document.querySelector('#task')
inputTask.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
let newTaskText = inputTask.value.trim()
if (newTaskText !== '') {
arrList1[dataId - 1].push(newTaskText)
localStorage.setItem('arr', JSON.stringify(arrList1))
//更新未完成事件界面
renderUnfinished()
//将input设为空
inputTask.value = ''
}
}
})
// 点击tabs
let tabs = document.querySelector('.tabs')
var fntab = function (e){
if (e.target.tagName === 'DIV' && e.target.hasAttribute('data-id')) {
document.querySelector('.tabs .active').classList.remove('active')
e.target.classList.add('active')
dataId = e.target.dataset.id
document.querySelector('.content .active').classList.remove('active')
document.querySelector(`.content .note:nth-child(${dataId})`).classList.add('active')
// 更新两个界面
renderFinished()
renderUnfinished()
bindEventListeners()
// alert("标签页码==="+(dataId - 1));
// e.stopPropagation()
event.stopPropagation()
// tabs.removeEventListener('click',fntab);
// tabs.addEventListener('click',fntab);
}};
// tabs.removeEventListener('click',fntab);
// tabs.addEventListener('click',fntab);
$(".tabs").unbind("click").bind("click",fntab);
///////////////////////自己定义函数////////////////////////////////////
//下面是全部重新开始
function exportLocalStorageAsJsonguili(e) {
const arrList1 = JSON.parse(localStorage.getItem('arr'))
const arrList2 = JSON.parse(localStorage.getItem('arr1'))
const arr=arrList1.map((row,index) => [...row, ...arrList2[index]]);
// arrList2 = [];
localStorage.setItem('arr1', "[[], [], [], [],[]]")
// localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr' , JSON.stringify(arr));
renderFinished();
renderUnfinished();
$(`.note:nth-child(${dataId}) .uul-unfinished`).unbind("click").bind("click",fnw);
$(`.note:nth-child(${dataId}) .uul-finished`).unbind("click").bind("click",fnni);
}
$(".guilin").unbind("click").bind("click",exportLocalStorageAsJsonguili);
///////////////////////////////////////////////////////////
// 绑定事件监听器
function bindEventListeners() {
let un_ul = document.querySelector(`.note:nth-child(${dataId}) .uul-unfinished`)
let ul = document.querySelector(`.note:nth-child(${dataId}) .uul-finished`)
let cxin = document.querySelector(`.note:nth-child(${dataId}) .deleteAll`)
// 删除未完成
var fn = function (e){
if (e.target.classList.contains('delete')){
let index = parseInt(e.target.dataset.id)
// alert("行号===="+(index));
arrList1[dataId - 1].splice(index, 1)
// alert("标签页码==="+(dataId - 1));
// console.log(dataId - 1);
localStorage.setItem('arr', JSON.stringify(arrList1))
renderUnfinished()
event.stopPropagation()
}};
$(`.note:nth-child(${dataId}) .uul-unfinished`).unbind("click").bind("click",fn);
// 删除已完成
var fnyi = function (e){
if (e.target.classList.contains('delete22')) {
let index = parseInt(e.target.dataset.id)
// alert("行号yi===="+(index));
// console.log(dataID)
arrList2[dataId - 1].splice(index, 1)
// alert("标签页码yi==="+(dataId - 1));
localStorage.setItem('arr1', JSON.stringify(arrList2))
renderFinished()
event.stopPropagation()
}};
$(`.note:nth-child(${dataId}) .uul-finished`).unbind("click").bind("click",fnyi);
// nxnx 每天重新开始就是把完成数组加入到未完成数组
cxin.addEventListener('click', function (e) {
if (e.target.tagName === 'SPAN') {
arrList1[dataId - 1] .push(...arrList2[dataId - 1]);
arrList2[dataId - 1] = [];
localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr' , JSON.stringify(arrList1));
renderFinished();
renderUnfinished();
}
})
// 点击未完成按钮任务变成完成
var fnw = function (e){
if (e.target.classList.contains('center-item')) {
let dataName = parseInt(e.target.dataset.name);
arrList2[dataId - 1].push(arrList1[dataId - 1][dataName]);
arrList1[dataId - 1].splice(dataName, 1);
localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr', JSON.stringify(arrList1));
renderFinished();
renderUnfinished();
}};
$(`.note:nth-child(${dataId}) .uul-unfinished`).unbind("click").bind("click",fnw);
$(`.note:nth-child(${dataId}) .uul-unfinished`).bind("click",fn);
//nxnx 点击yiyiyi完成按钮任务变成完成
var fnni = function (e){
if (e.target.classList.contains('center-item')) {
let dataName = parseInt(e.target.dataset.name);
arrList1[dataId - 1].push(arrList2[dataId - 1][dataName]);
arrList2[dataId - 1].splice(dataName, 1);
localStorage.setItem('arr1', JSON.stringify(arrList2));
localStorage.setItem('arr', JSON.stringify(arrList1));
renderFinished();
renderUnfinished();
}};
$(`.note:nth-child(${dataId}) .uul-finished`).unbind("click").bind("click",fnni);
$(`.note:nth-child(${dataId}) .uul-finished`).bind("click",fnyi);
}
// 更新未完成
function renderUnfinished() {
let un_ul = document.querySelector(`.note:nth-child(${dataId}) .uul-unfinished`);
const listItems = JSON.parse(localStorage.getItem('arr'))[dataId - 1].map((taskText, index) => {
return `
<li>
<div class="center-item" data-name="${index}" >${taskText}</div>
<div class="delete task-iconsan" data-id="${index}" > </div>
</li>
`
}).join('')
un_ul.innerHTML = listItems
}
// 更新已完成
function renderFinished() {
let ul = document.querySelector(`.note:nth-child(${dataId}) .uul-finished`);
const listItems = JSON.parse(localStorage.getItem('arr1'))[dataId - 1].map((taskText, index) => {
return `
<li>
<div class="center-item" data-name="${index}" >${taskText}</div>
<div class="delete22 task-iconsan" data-id="${index}" > </div>
</li>
`
}).join('')
ul.innerHTML = listItems
}
})
</script>
</body>
</html>

复制代码

提醒必须要有jquery.min.js 网上有!

感谢20#提供jquery.min.js 文件下载!

879792799 · 发表于 2025-8-12 07:15:49

本帖最后由 879792799 于 2025-8-12 07:36 编辑

最有意思部分就是这么复杂的数据存储仅仅只用到二维数组就搞定了数学真的好强大好强大啊!

燕飞龙 · 发表于 2025-8-12 07:49:11

谢谢分享

ylac · 发表于 2025-8-12 07:50:51

刚好有需要记录，下来试试，谢谢楼主

huxingzhuang · 发表于 2025-8-12 07:51:24

反正我不懂，一个字，牛。

czg2008 · 发表于 2025-8-12 07:55:14

挺好的，谢谢

wn168cn@163.com · 发表于 2025-8-12 08:02:48

感谢楼主分享！

dkzzlf · 发表于 2025-8-12 08:07:16

围观一下

小灰兔 · 发表于 2025-8-12 08:16:45

感谢楼主分享

Gzhq3721456 · 发表于 2025-8-12 08:20:01

不懂，膜拜了。

holley2008 · 发表于 2025-8-12 08:34:52

感谢分享

sf9608 · 发表于 2025-8-12 08:35:43

谁能提供一个jquery.min.js

201012121135 · 发表于 2025-8-12 08:40:54

谢谢分享

甲方 · 发表于 2025-8-12 09:00:32

不懂呢

view520 · 发表于 2025-8-12 09:00:49

感谢分享

ynb168c · 发表于 2025-8-12 09:05:17

感谢分享!

2810401407 · 发表于 2025-8-12 09:21:41

感谢分享

cc2025 · 发表于 2025-8-12 09:32:56

感谢分享

uouobb · 发表于 2025-8-12 09:49:06

支持，感谢分享

yxldh · 发表于 2025-8-12 09:55:16

感谢楼主分享

小龙飞 · 发表于 2025-8-12 09:56:16

感谢您的分享！

a68032611 · 发表于 2025-8-12 10:28:38

感谢您的分享！

guong · 发表于 2025-8-12 10:37:51

感谢分享！

小灰猪 · 发表于 2025-8-12 11:08:40

感谢分享

jh198354 · 发表于 2025-8-12 11:10:54

谢谢分享！！！

xtayspwk · 发表于 2025-8-12 11:27:27

好像很不错，感谢分享

879792799 · 发表于 2025-8-12 11:28:30

yxldh 发表于 2025-8-12 09:55
感谢楼主分享

感谢大大热心帮忙!!!

valen21 · 发表于 2025-8-12 11:45:15

感谢分享

进士小站 · 发表于 2025-8-12 11:56:50

感谢分享
看起来很复杂啊

879792799 · 发表于 2025-8-12 11:58:55

进士小站发表于 2025-8-12 11:56
感谢分享
看起来很复杂啊

小网页而已

		自动登录	找回密码
密码			注册

【短平快】比记事本更好用的离线本地存储网页[念念不忘,必有返响]记事本!

点评

点评

点评

评分

点评

浏览过的版块