原生js实现一个简单的备忘录

最新推荐文章于 2022-08-24 22:22:26 发布

人生丶短短几个秋

最新推荐文章于 2022-08-24 22:22:26 发布

阅读量1.1k

点赞数 1

分类专栏： jQuery Js Css 文章标签： javascript html jquery

本文链接：https://blog.csdn.net/IUH_VIC/article/details/105537382

版权

这篇博客介绍如何用原生JavaScript实现一个简单的备忘录功能，确保可编辑文本在页面刷新后不会清除。通过监听keyup事件并缓存内容来达到持久化效果。

摘要由CSDN通过智能技术生成

实现目标:

可编辑文本
刷新页面不清除

效果：

实现的原理比较简单，我就直接贴代码了

Html: 一个可编辑的div

<div class="edit-book" id="remember" contenteditable="true" style="outline: none">
      <!-- 今天要按时吃饭 -->
</div>

Js：监听keyup事件缓存内容

//偷个懒直接用jQuery语法了
function initBook () {
    var storage;
    if (window.localStorage) {
        storage = window.localStorage;
    } else if (window.sessionStorage) {
        storage = window.sessionStorage;
    } else {
        $('#remember').html('您的浏览器版本也太老了!');
        $('#remember').attr('contenteditable', false);
        return false;
    }
    var history = '';
    if (stora