Web本地存储 - localStorage

最新推荐文章于 2021-08-22 13:07:05 发布
最新推荐文章于 2021-08-22 13:07:05 发布
阅读量545 收藏 1
点赞数
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_26672553/article/details/51296453
版权

HTML5的Web本地存储(离线存储)是利用localStorage。

我们直接来看这个”便条贴”案列:

<!DOCTYPE html>
<html>
<head>
    <title>Web本地存储</title>
</head>
<body>
    <form>
        <input type="text" id="note_text">
        <input type="button" id="add_button" value="Add Sticky Note to Self">
    </form>
    <ul id="stickies"></ul>
</body>
<script type="text/javascript">
    window.onload = init;
    function init(){
        var button = document.getElementById("add_button");
        button.onclick = createSticky; // 按钮点击处理程序

        for(var i=0;i<localStorage.length;i++){
            var key = localStorage.key(i);
            // 检查数据项的键是否"sticky"开头，来确保它是一个便条贴。(localStorage中可能还存储其他数据项，而不仅仅是我们的便条贴)
            if (key.substring(0,6) == "sticky") {
                 var value = localStorage.getItem(key);
                 addStickyToDom(value);
            }
        }
    }

    // 编写addStickyToDom函数，向<ul>元素插入便条
    function addStickyToDom(value){
        var stickies = document.getElementById("stickies");
        var sticky = document.createElement("li");
        var span = document.createElement("span");
        span.setAttribute("class","sticky");
        span.innerHTML = value;
        sticky.appendChild(span);
        stickies.appendChild(sticky);
    }

    // 创建一个便条贴
    function createSticky(){
        var value = document.getElementById("note_text").value;
        var key = "sticky_" + localStorage.length;
        localStorage.setItem(key,value);
        addStickyToDom(value);
    }
</script>
</html>

2.能否存储数组或对象
在存储之前，完全可以把一个数组或对象转换为字符串。

<!DOCTYPE html>
<html>
<head>
    <title>Web本地存储</title>
</head>
<body>
    <form>
        <input type="text" id="note_text">
        <input type="button" id="add_button" value="Add Sticky Note to Self">
    </form>
    <ul id="stickies"></ul>
</body>
<script type="text/javascript">
    window.onload = init;
    function init(){
        var button = document.getElementById("add_button");
        button.onclick = createSticky; // 按钮点击处理程序

        var stickiesArray = getStickiesArray(); // 获取包含便条贴键的数组

        for(var i=0;i<stickiesArray.length;i++){
            var key = stickiesArray[i]; // 数组中的每一项分别是一个便条贴的键
            var value = localStorage[key]; // 从localStorage中获取相应的值
            addStickyToDom(value); //增加到DOM
        }
    }

    // 创建一个便条贴
    function createSticky(){
        var stickiesArray = getStickiesArray(); // 首先获取便条贴数组
        var currentDate = new Date();
        var key = "sticky_" + currentDate.getTime();
        var value = document.getElementById("note_text").value;
        localStorage.setItem(key,value);

        stickiesArray.push(key); // 把新键添加到数组
        // 然后将这个数组转为字符串，写回到localStorage
        localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));

        addStickyToDom(value); // 最后更新页面
    }

    // 获取存储所有便条贴键的数组
    function getStickiesArray(){
        // 首先从localStorage得到数据项
        var stickiesArray = localStorage.getItem("stickiesArray");
        if (!stickiesArray) { // 如果是第一次加载这个应用，可能还没有
            stickiesArray = [];
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));
        }else{
            // 转换为一个javascript数组
            stickiesArray = JSON.parse(stickiesArray);
        }
        return stickiesArray;
    }


    // 编写addStickyToDom函数，向<ul>元素插入便条
    function addStickyToDom(value){
        var stickies = document.getElementById("stickies");
        var sticky = document.createElement("li");
        var span = document.createElement("span");
        span.setAttribute("class","sticky");
        span.innerHTML = value;
        sticky.appendChild(span);
        stickies.appendChild(sticky);
    }

</script>
</html>

3.如何删除
删除所有数据项(使用时要当心): localStorage.clear()
删除某一个数据项: localStorage.removeItem(key);

仔细想想，我们这里删除便条贴并不只是调用removeItem方法那么简单，我们还需要处理stickiesArray。我们写个函数来干这事吧：

function deleteSticky(key){
        // 首先从localStorage删除
        localStorage.removeItem(key);

        var stickiesArray = getStickiesArray();
        if (stickiesArray) {
            for(var i=0;i<stickiesArray.length;i++){
                if (key == stickiesArray[i]) {
                    // 找到这个键后，将它从数组删除
                    stickiesArray.splice(i,1);
                }
            }
            // 最后保存新的stickiesArray到localStorage
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));
        }
    }

4.优化便条贴应用

<!DOCTYPE html>
<html>
<head>
    <title>Web本地存储</title>
</head>
<body>
    <form>
        <input type="text" id="note_text">
        <input type="button" id="add_button" value="Add Sticky Note to Self">
    </form>
    <ul id="stickies"></ul>
</body>
<script type="text/javascript">
    window.onload = init;
    function init(){
        var button = document.getElementById("add_button");
        button.onclick = createSticky; // 按钮点击处理程序

        var stickiesArray = getStickiesArray(); // 获取包含便条贴键的数组

        for(var i=0;i<stickiesArray.length;i++){
            var key = stickiesArray[i]; // 数组中的每一项分别是一个便条贴的键
            var value = localStorage[key]; // 从localStorage中获取相应的值
            addStickyToDom(key,value); //增加到DOM
        }
    }

    // 创建一个便条贴
    function createSticky(){
        var stickiesArray = getStickiesArray(); // 首先获取便条贴数组
        var currentDate = new Date();
        var key = "sticky_" + currentDate.getTime();
        var value = document.getElementById("note_text").value;
        localStorage.setItem(key,value);

        stickiesArray.push(key); // 把新键添加到数组
        // 然后将这个数组转为字符串，写回到localStorage
        localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));

        addStickyToDom(key,value); // 最后更新页面
    }

    // 获取存储所有便条贴键的数组
    function getStickiesArray(){
        // 首先从localStorage得到数据项
        var stickiesArray = localStorage.getItem("stickiesArray");
        if (!stickiesArray) { // 如果是第一次加载这个应用，可能还没有
            stickiesArray = [];
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));
        }else{
            // 转换为一个javascript数组
            stickiesArray = JSON.parse(stickiesArray);
        }
        return stickiesArray;
    }


    // 编写addStickyToDom函数，向<ul>元素插入便条
    function addStickyToDom(key,value){
        var stickies = document.getElementById("stickies");
        var sticky = document.createElement("li");
        sticky.setAttribute("id",key);
        var span = document.createElement("span");
        span.setAttribute("class","sticky");
        span.innerHTML = value;
        sticky.appendChild(span);
        stickies.appendChild(sticky);
        // 点击一个便条贴就会调用deleteSticky函数
        sticky.onclick = deleteSticky;
    }

    // 点击便条贴的事件处理
    function deleteSticky(e){
        // 得到<li>上的id
        var key = e.target.id;
        if (e.target.tagName.toLowerCase() == "span") {
            // 如果点击的是<span>则需要得到它的父元素<li>的id
            key = e.target.parentNode.id;
        }


        localStorage.removeItem(key);
        var stickiesArray = getStickiesArray();
        if (stickiesArray) {
            for(var i=0;i<stickiesArray.length;i++){
                if (key == stickiesArray[i]) {
                    // 找到这个键后，将它从数组删除
                    stickiesArray.splice(i,1);
                }
            }
            localStorage.setItem("stickiesArray",JSON.stringify(stickiesArray));

            // 最后还需要从页面删除这个便条贴
            removeStickyFromDOM(key);
        }
    }

    // 从DOM删除便条贴
    function removeStickyFromDOM(key){
        // 从DOM获取<li>元素
        var sticky = document.getElementById(key);
        // <ul>删除子节点<li>
        sticky.parentNode.removeChild(sticky);
    }

</script>
</html>
学习笔记666
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记一、三：JavaScript + html5（1）数组 + web本地存储
Reiuji_Utsuho的博客
07-29 191
开一个新分类，命名和内容如题。 第一个是js09，关于数组的，还有就是验证一下能不能用web本地存储： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="sens1"> </p> <script type="text
html5中web本地存储 客户端存储数据localStorage
weixin_72303943的博客
06-28 225
web本地存储 客户端存储数据localStorage
Web存储—localStorage存储
道阻且长，行则将至。
08-22 441
Web存储—localStorage存储 一、 localStorage存储 特点：特点：本地存储数据的不需要网络、大小5M 、域内安全、永久存储、只要不删除，就一直存在 二、语法 设置：localStorage.setItem(key, value) 获取：localStorage.getItem(key) 删除：localStorage.removeItem(key) 全部删除：localStorage.clear(); ...
web 本地存储 （localStorage、sessionStorage）
weixin_30733003的博客
05-15 59
web 本地存储 （localStorage、sessionStorage） 说明 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载 ...
js部分localStorage，sessionStorage，ul传值
weixin_44022586的博客
03-13 250
标题localStorage，sessionStorage，ul传值 localStorage: b页面内容： var str=‘hello’ var scopt=window.localStorage scopt[str]=‘word’ document.getElementsByTagName(‘button’)[0].onclick=function(){ window.location.h...
nuxt-vuex-localstorage
05-05
通过连接Vuex和Web存储，可以更有效地利用本地存储和会话存储。 与其他持久性插件不同，通过仅分配Vuex的某些特定对象，Web存储可以节省更多空间，并且还可以与现有Vuex用法一起使用。 通过本地存储的数据绑定可以...
core-localstorage:访问本地存储
06-07
**核心本地存储（Core LocalStorage）** 在Web开发中，数据存储是一个至关重要的部分，特别是在构建复杂的单页应用程序（SPA）时。`core-localstorage`是Polymer框架的一个组件，它提供了一个简单的方法来利用...
前端项目-js-data-localstorage.zip
09-03
在"js-data-localstorage-master"这个压缩包里，我们可以预期找到一个封装了`localStorage`操作的库或框架。这个适配器可能包含以下功能： 1. **键值对操作**：提供简便的方法来设置、获取、更新和删除`...
database-js-localstorage:使用本地存储作为表存储机制的数据库驱动程序
04-28
Database-js-localstorage是使用Web浏览器本地存储作为后端的驱动程序。 它支持表创建，选择，插入，删除和更新。 选择可以使用内部，左侧和右侧联接。 SQL解析器尚不支持外部联接。 它支持架构，默认架构称为“公共...
universal-localstorage:在节点和浏览器中有效的本地存储
04-30
在当今的Web开发中，本地存储已经成为不可或缺的一部分，尤其是在实现离线应用或者缓存用户数据时。"universal-localstorage"库正是为了解决这一问题而生，它提供了一个统一的接口，使得开发者在Node.js环境中和...
localStorage(web存储)的用法
littlebearGreat——宁静致远
07-28 361
注意：     localStorage只能存储字符串，要存储json就要用JSON.stringify()与JSON.parse()相互转化了。 localStorage的一些使用方法：     1. localStorage就是个json，只是key对应的value只能是字符串而已，其它操作与json相同。     2. localStorage清除所有值的方法：
Web存储技术localStorage和sessionStorage的基本用法
hello_6_world的博客
09-09 328
##Web存储技术localStorage和sessionStorage的基本用法    1、首先对比cookie,早起我们都是利用cookie进行web页面本地存储的相关操作，但是cookie存储的数据量是有限的（少量的）,另外cookie的数据会被上传到服务器，影响服务器传输速度和用户体验；而localStorage和sessionStorage进行数据存储可以存储大量的数据，同时数据不会保
通过singlefile把网页保存到本地
lionwerson的博客
03-22 2130
有些比较重要，有趣，实用的网页想永久保存，如果放到浏览器的书签，不太放心，因为可能有失效的可能，也不利于分类和查看，有两个办法可以永久保存起来，我分别列举了两种方法的优点和缺点。 1.通过各种笔记的网页剪报功能保存网页。 网上有各种笔记软件有这个功能（有道云，印象笔记等等） 优点：可以随时同步，可以保存网页到云端同步到各种客户端，便于分类和整理，笔记和网页永不丢失。 缺点：1.空间容量有限...
web页面数据存储：localStorage、sessionStorage、cookie使用
RuanJianXiaoXueTu的博客
09-13 246
一、localStorage localstorage数据创建 //先将数据str通过JSON.stringify()方法进行json化，在将json数据赋值到localStorage对象 localStorage_str localstorage数据读取 //先将localStorage数据localStorage_str进行读取得到json数据，在将json数据通过 JSON.pa...
『技巧』快速保存完整动态网页到本地（离线使用）
热门推荐
DemoJx的博客
10-24 1万+
快速保存完整动态网页到本地（离线使用）
网页实现数据离线永久保存localStorage、storage
丘秋的博客
01-26 1万+
网页实现数据永久保存localStorage、storage 这里介绍是二个常用简单的储存方法：localStorage、storage localStorage localStorage可以永久保存数据，没有过期限制只能手动清除。 localStorage的数据量一般不超过5M localStorage数据以键值对的方式保存 localStorage数据不可跨域 使用方法 保存数据 setI...
使用本地存储localStorage保存数据的todoList
恰西v的前端开发学习笔记
01-12 4505
ToDoList 帮你把要做的事情列出来，一项一项，类似思维导图。 最明显的好处是强迫自己整理出任务的每个部分，理顺后按部就班的完成，提高效率。 现在,我们来使用js来做一个todolist基本功能开始的构思是用一个input来输入要做的事情,按钮确定,然后添加的列表,单击列表里的项目,就会使该项目消失,即完成..
Hadoop之HDFS的Shell客户端操作
码放南山
10-25 324
目录 1．基本语法 2．命令大全 3、常用命令实操 （0）启动Hadoop集群（方便后续的测试） （1）-help：输出这个命令参数 （2）-ls: 显示目录信息 （3）-mkdir：在hdfs上创建目录 （4）-moveFromLocal从本地剪切粘贴到hdfs （5）-appendToFile ：追加一个文件到已经存在的文件末尾 （6）-cat：显示文件内容 （7）-t...
本地数据存储 localStorage sessionStorage
最新发布
06-01
在 JavaScript 中，我们可以使用以下代码来读取和保存数据到本地存储中： ``` // 保存数据到 localStorage 中 localStorage.setItem('key', 'value') // 从 localStorage 中读取数据 const value = localStorage....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值