LocalStorage的使用

最新推荐文章于 2025-06-30 09:12:01 发布

孙一phone

最新推荐文章于 2025-06-30 09:12:01 发布

阅读量727

点赞数

CC 4.0 BY-SA版权

分类专栏： html5

本文链接：https://blog.youkuaiyun.com/gansihuangxudong/article/details/79810857

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了为何选择LocalStorage而非Cookie进行数据存储，对比了LocalStorage与SessionStorage的不同之处，并通过一个离线记事本实例展示了如何使用LocalStorage来实时保存数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要使用LocalStorage：

cookie的存储大小较小

cookie所消耗性能较多

LocalStorage与SessionStorage的区别：

LocalStorage会存储到本地，直到手动清除。

SessionStorage存活在当前页面的生命周期，一旦页面关闭，存储的数据也会消失

LocalStorage的基本使用方法：

存储数据：

localStorage.setItem('key','需要存储的数据');

获取数据：

var value=localStorage.getItem('key');

删除数据：

localStorage.removeItem('key');

案例-离线记事本

index.html

<html>    
    <head>
        <meta charset="utf-8">
        <title>随手记</title>
    </head>
    <body>
        <h2>随手记--实时保存</h2>
        <div>
            <textarea id="content" cols="100" rows="20"></textarea>
        </div>
        <script src="main.js"></script>
    </body>
</html>

main.js

//获取记录内容的文本域
var el=document.querySelector('#content');
//页面载入时，从本地获取存储的数据
el.value=localStorage.getItem('data') || '';
//为文本域dom节点添加blur事件
el.addEventListener('blur',function(){
    //获取文本域的内容
    var data=el.value;
    //保存到本地
    localStorage.setItem('data',data);
})