运用localStorage 创建简单网页信息列表

最新推荐文章于 2024-09-04 09:14:33 发布

The hang 土豆

最新推荐文章于 2024-09-04 09:14:33 发布

阅读量310

点赞数

CC 4.0 BY-SA版权

文章标签： html5 动画 javascript 前端

本文链接：https://blog.youkuaiyun.com/LiHang1234567777/article/details/125876586

本文介绍了如何利用localStorage在前端进行本地数据存储，并通过HTML和JavaScript创建了一个简单的信息列表页面，包括表格的构建和样式的设置。

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

文章目录

前言
一、localStorage给本地赋值
二、创建简单页面
总结

前言

localStorage特性，这个特性主要是用来作为本地存储来使用的

一、localStorage给本地赋值

代码如下：

 <div id="result"></div>
    <script type="text/javascript">
        if (typeof(Storage) != "undefined") {
            // document.write("您的浏览支持webstorage")
            //像浏览器存入一个键值对
            //第一种方式：
            localStorage.setItem("stuname", "崔翔轩");
            //第二种方式
            localStorage.stuid = "2222222"
                //从浏览器中获取本地存储值
            document.getElementById("result").innerHTML = localStorage.getItem("stuname") + "学号:" + localStorage.stuid;

        } else {
            // document.write("您的浏览不支持webstorage")
            document.getElementById("result").innerHTML = "您的浏览不支持webstorage"
        }
    </script>

二、创建简单页面

1.引入网站，网址

html代码如下（示例）：

<form action="">
        <table>
            <tr>
                <td>网站名(key)</td>
                <td><input type="text" id="siteName" placeholder="请输入网站名"></td>
            </tr>
            <tr>
                <td>网址(value)</td>
                <td><input type="text" id="siteValue" placeholder="请输入对应网址"></td>
            </tr>
            <tr>
                <td><input type="button" class="add" value="添加" onclick="add()"></td>
            </tr>
       
            <tr>
                <td>网站名</td>
                <td><input type="text" id="key" placeholder="请输入网站名"></td>
            </tr>
            <tr>
                <td><input type="button" class="search" value="查询" onclick="search()"></td>
            </tr>
            <tr>
                <td>
                    <textarea name="" id="result" cols="30" rows="10">搜索结果</textarea>
                </td>
            </tr>
        </table>
    </form>

js代码

<script type="text/javascript">
        window.onload = loadAll();
        //添加
        function add() {
            var wm = document.getElementById("siteName").value
            var wz = document.getElementById("siteValue").value
            localStorage.setItem(wm, wz);
            alert("添加成功");
        }
        //查询
        function search() {
            //获取表单中的输入网站名和网址
            var key = document.getElementById("key").value
            document.getElementById("result").innerHTML = "网站名:" + key + "网址：" + localStorage.getItem(key);
        }

    </script>

css样式

 <style>
        .add {
            width: 100px;
            height: 30px;
            background-color: green;
        }
        
        .search {
            width: 100px;
            height: 30px;
            background-color: red;
        }
    </style>

2.创建表格

html代码如下（示例）：

<tr>
                <td>
                    <div id="tab">
                        <table>

                        </table>
                    </div>
                </td>
            </tr>

js代码如下

  //表格
        function loadAll() {
            var result = "<table>";
            result += "<tr><th>网站名(key)</th><th>网址(value)</th></tr>"
            for (var i = 0; i < localStorage.length; i++) {
                var s = localStorage.key(i) + " " + localStorage.getItem(localStorage.key(i));
                result += "<tr><td>" + localStorage.key(i) + "</td><td>" + localStorage.getItem(localStorage.key(i)) + "</td></tr>"
            }
            result += "</table>"
            document.getElementById("tab").innerHTML = result;
        }