本地存储

概念

一个程序需要保存用户数据或程序数据一般是用的服务器进行保存。但在前端部分，如果我们想要保存数据，在HTML5之前可以通过cookie等技术来保存数据，但因为安全性差，以及数据保存容量很小。所有HTML5新增了本地存储可以实现在本地存储大量的数据。
HTML5新增了localStorage以及sessionStorage以及配套的api来实现通过JavaScript将数据保存到本地。
HTML5是根据保存时间的不同分为localStorage以及sessionStorage。

localStorage

保存数据
localStorage.setItem('属性名'，'属性值');
读取数据
localStorage.getItem('属性名');
删除某个数据
localStorage.removeItem('属性名');
删除所有数据
localStorage.clear();
例子
localStorage.setItem('input'，'123456');
var data = localStorage.getItem('input');
console.log(data); //输出123456

localStorage保存的数据有效期限是永久。即关闭浏览器后重新打开依然可以使用。

sessionStorage

功能上跟loaclStorage是完全一样的。
``` 保存数据 sessionStorage.setItem('属性名'，'属性值'); 读取数据 sessionStorage.getItem('属性名'); 删除某个数据 sessionStorage.removeItem('属性名'); 删除所有数据 sessionStorage.clear(); 例子 sessionStorage.setItem('input'，'123456'); var data = sessionStorage.getItem('input'); console.log(data); //输出123456 ``` 保存的时间是当前标签页关闭时。

localStorage和sessionStorage的区别

localStorage保存的数据是永久保存的。
sessionStorage保存的数据是临时数据，标签页关闭后，数据会消失。
无论localStorage还是sessionStorage，都只能保存字符串格式的数据。

注册页面
<body>
    用户名：<input type="text" id="name">
    密码：<input type="password" id="pass">
    <button onclick="save();">保存</button>
    没有账号？立即<a href="本地存储.html">登录</a>
    <script>
        function save(){
            var users = localStorage.getItem('username');
            var pass = localStorage.getItem('userpass');
            var username = document.getElementById('name').value;
            var userpass = document.getElementById('pass').value;
            if(username==null || userpass==null){
                users = [];
                pass = [];
            }else{
                users = users.split(',');
                pass = pass.split(',');
            }
            users.push(username);
            pass.push(userpass);
            var userStr = localStorage.setItem('username',users.join(','));
            var passStr = localStorage.setItem('userpass',pass.join(','));
        }
    </script>
</body>
登录页面
<body>
    用户名：<input type="text" id="name">
    密码：<input type="password" id="pass">
    <button onclick="login();">登录</button>
    没有账号？立即<a href="注册.html">注册</a>
    <script>
        function login(){
            var username = document.getElementById('name').value;
            var userpass = document.getElementById('pass').value;
            var user = localStorage.getItem('username');
            var pass = localStorage.getItem('userpass');
            if(username == user && userpass==pass){
                alert("登录成功")
            }else{
                alert("登录失败")
            }
        }
    </script>
</body>

拖拽

概念

是HTML5新增的特性，HTML5增强了JavaScript对于dom元素的操作，额外的提供了专属的事件以及配套的api来实现拖拽操作。

实现流程

谁会被拖拽
给被拖拽的HTML标签设置draggable=true，让标签可以被拖拽。
放置在哪个标签：作为放置标签
给放置标签添加dragover事件，取消事件默认行为，以此来取消不可放置的限制。
放置后要完成什么操作
给放置标签设置drop事件。当拖拽操作结束后会针对放置元素触发该事件。
实现数据在事件之间传递

在事件中保存数据
event对象.dataTransfer.setData("属性名"，“属性值”);
在另一个事件中读取数据
event对象.dataTransfer.getData("属性名"); //属性值
例子
document.body.addEventListener('dragstart',function demo(e){
    e.dataTransfer.setData("class","item1");
    });
document.body.addEventListener('drop',function (e){
   var className e.dataTransfer.getData("class");
   console.log(className); //输出item1
    });

相应api

draggestart：当拖拽操作发生时，拖拽元素会触发该事件。
一般我们在该事件中利用e.dataTransfer.setData保存拖拽元素的id或class，在发生放置事件（drop）的标签上利用e.dataTransfer.getData来获取保存的数据。
offsetX&offsetY：获取鼠标在某个标签中的偏移量.offset指的是鼠标和标签左边的距离。offsetY即鼠标和标签顶部的距离。

event对象名.offsetX 或 event对象名.offsetY

HTML5应用