拖动、web-Storage、掌握localStorage使用、网站列表程序

忘川之鱼

已于 2022-07-19 19:19:07 修改

阅读量210

点赞数

文章标签：前端 javascript 开发语言

于 2022-07-19 19:18:11 首次发布

本文链接：https://blog.csdn.net/m0_68618659/article/details/125876554

版权

本文详细介绍了HTML5中的拖放功能，包括设置元素可拖放、拖放事件及案例演示。同时，深入讲解了Web Storage中的localStorage，阐述了其特点、使用方法，并给出了存储和读取数据的案例。最后，通过一个网站列表程序展示了localStorage的实际应用，允许用户添加和查询网站信息。

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

一、拖动

1）、设置元素为可拖放：

首先，为了使元素可拖动，把draggable属性设置为true :<img draggable=" true">

2）、拖动什么- ondragstart和setData()：

然后，规定当元素被拖动时,会发生什么。

在上面的例子中，ondragstart 属性调用了-个函数，drag(ev)，它规定了被拖动的数据。

dataTransfershtDatal方法设置被拖数据的数据类型和值:

function drag(ev){
    ev. dataTransfer . setData("Text" , ev. target. id);
}

Text是-个DOMString，表示要添加到drag object的拖动数据的类型。值是可拖动元素的id ("drag1")。

3）、元素功能：

ondragstart:该事件表示拖放开始

ondragover：该事件表示拖放结束

ondrag：该事件表示拖放过程

draggable: 值为true时表示元素可拖动，默认为false，表示不能拖动

4）、案例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

#result {

width: 200px;

border: 1px solid red;

height: 250px;

}

#result1 {

width: 200px;

border: 1px solid red;

height: 250px;

}

</style>

</head>

<body>

<p>请将下面图片拖入到框中</p>



<div id="result1" οndragοver="allowDrag(event)" οndrοp="drop(event)"></div>

<div id="result" οndragοver="allowDrag(event)" οndrοp="drop(event)"></div>



<img src="img/flower.jpg" alt="" id="img" draggable="true" οndragstart="drag(event)">

<script type="text/javascript">

//用于施救的函数拖动已开始

function drag(ev) {

ev.dataTransfer.setData("Text", ev.target.id);

}

//拖动过程

function drop(ev) {

// 允许其他元素拖放到此处

ev.preventDefault();

// 获取要拖放的元素id

var id = ev.dataTransfer.getData("Text");

// 将一个标签添加到另一个标签中，可以使用appendChild();

ev.target.appendChild(document.getElementById(id));

}

// 拖动结束

function allowDrag(ev) {

// 允许其他元素拖放到此处

ev.preventDefault();

}

</script>

</body>

</html

二、web-Storage、

1）、简介：

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求,会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析,给发开者带来很多不便，为此，HTML5规范提出了本地存储的解决方案。

HTML 5的本地存储解决方案中定义了两个重要的API: Web Storage和本地数据库Web SQL Database.本章将重点讲述Web Storage的基本用法。

window.localStorage对象本地存储

Web Storage API

两个关键的对象

window. sessionStorage对象区域存储

●localStorage -用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

●sessionStorage -用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

2）、Web Storage的特点:

●设置数据和读取数据比较方便

● 只能存储字符串，如果要存储JSON对象,可以使用window.JSON的stringify()方法和parse()方法进行序列

● 只能存储字符串，如果要存储JSON对象,可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。

3）、案例1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        if (typeof(Storage) != "undefined") {
            document.write("您的浏览器支持webStoragr");
        } else {
            document.write("您的浏览器不支持webstorage")
        }
    </script>
</body>

</html>

效果1：

4）、案例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="result"></div>
    <script type="text/javascript">
        if (typeof(Storage) != "undefined") {
            // document.write("您的浏览器支持webStorage");
            // 向浏览器存入一个键值对
            // 第一种方式：
            localStorage.setItem("stuname", "邵文潇");
            // 第二种方式：
            localStorage.stuid = "220701";
            // 从浏览器中获取本地存储的值
            document.getElementById("result").innerHTML = localStorage.getItem("stuname") + "学号：" + localStorage.stuid;
        } else {
            // document.write("您的浏览器不支持webstorage");
            document.getElementById("result").innerHTML = "您的浏览器不支持webstorage";

        }
    </script>
</body>

</html>

效果2：

三、掌握localStorage使用

localStorage对象存储的数据没有时间限制。第二天、第二周或下一-年之后，数据依然可用。

不管是localStorage,还是sessionStorage,可使用的API都相同， Storage接口中提供了一些方法和属性,

方法&属性	描述
setltem(key,value)	该方法接收一一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值
getltem(key)	该方法接收一个键名作为参数，返回键名对应的值
romoveltem(key)	该方法接收一个键名作为参数,并把该键名从存储中删除
length	类似数组的length属性，用于访问Storage对象中item的数量。
key(n)	用于访问第n个key的名称
clear()	清除当前域下的所有localSotrage内容

案除

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="点击+1" onclick="clickCout()">
    <input type="button" value="点击-1" onclick="clickCout2()">
    <div id="result"></div>
    <script type="text/javascript">
        function clickCout() {
            if (localStorage.click_num) {
                localStorage.click_num = parseInt(localStorage.click_num) + 1
            } else {
                localStorage.click_num = 1;
            }
            document.getElementById("result").innerHTML = localStorage.click_num;
        }

        function clickCout2() {
            if (localStorage.click_num) {
                localStorage.click_num = parseInt(localStorage.click_num) - 1
            } else {
                localStorage.click_num = 1;
            }
            document.getElementById("result").innerHTML = localStorage.click_num;
        }
    </script>
</body>

</html>

当前域下的所有localSotrage内容例

四、网站列表程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #siteName {
            margin-top: 10px;
            margin-bottom: 5px;
        }
        
        .add {
            background-color: green;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            color: white;
            font-weight: 600;
            border: none;
            margin-top: 10px;
        }
        
        #tab table {
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        #tab table tr th {
            background-color: green;
        }
        
        #tab table tr td {
            border: 1px solid black;
        }
        
        .search {
            width: 100px;
            height: 30px;
            background-color: red;
            color: white;
            font-weight: 600;
            border: none;
            margin-top: 10px;
        }
        
        #result {
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div class="div1">
        <p>
            <span>网站名(key):</span>
            <input type="text" id="siteName" placeholder="请输入网站名"><br>
            <span>网址(value):</span>
            <input type="text" id="siteValue" placeholder="请输入对应的网址"><br>
            <input type="button" class="add" value="添加" onclick="add()">
        </p>
        <div id="tab"></div>
        <hr>
        <p>
            <span>网站名(key)：</span>
            <input type="text" id="key" placeholder="请输入网站名"><br>
            <input type="button" class="search" value="查询" onclick="search()">
            <div id="result">搜索结果显示</div>
        </p>
    </div>
    <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 wm = document.getElementById("key").value;
            document.getElementById("result").innerHTML = "网站名" + wm + "<br>网址：" + localStorage.getItem(wm);
        }
        // 加载出表格table
        function loadAll() {
            var result = "<table>";
            result += "<tr><th>网站名(key)</th><th>网址(value)</th></tr>";
            // 使用循环获取到每一个item
            for (var i = 0; i < localStorage.length; i++) {
                var s = localStorage.key(i) + " " + localStorage.getItem(localStorage.key(i));
                // alert(s);
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);
                result += "<tr><td style='text-align:center;'>" + key + " </td><td>" + value + "</td></tr>"
            }
            result += "</table>";
            document.getElementById("tab").innerHTML = result;
        }
    </script>
</body>

</html>

效果图：

忘川之鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖动、web-Storage、掌握localStorage使用、网站列表程序

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求,会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析,给发开者带来很多不便，为此，HTML5规范提出了本地存储的解决方案。HTML5的本地存储解决方案中定义了两个重要的APIWebStorage和本地数据库WebSQLDatabase.本章将重点讲述WebStorage的基本用法。......
复制链接

扫一扫