页面上有一个红色div, 可以对该div实现拖拽, 每次拖拽后需要保存位置 下次重新进入该页面时, 该红色div还是在最后一次拖拽松开时的位置

实现这个功能需要用到 HTML5 Web Storage API 中的 localStorage 对象。具体实现步骤如下：

1. 在页面中添加一个可拖拽的红色 div，可以使用 CSS3 中的 transform 属性实现拖动效果。

2. 给红色 div 绑定 dragend 事件，在事件处理函数中获取 div 的位置信息，并使用 localStorage 将位置信息保存下来。

3. 在页面加载时，首先从 localStorage 中读取之前保存的位置信息，如果存在则设置红色 div 的位置为保存的位置。

下面是一个简单的实现示例：

HTML 代码：

<div id="redBox" draggable="true">可拖拽的红色 div</div>

CSS 代码：

#redBox {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(0, 0);
}

JavaScript 代码：

var redBox = document.getElementById('redBox');

// 设置初始位置
var x = localStorage.getItem('x');
var y = localStorage.getItem('y');
if (x && y) {
  redBox.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
}

// 绑定 dragend 事件
redBox.addEventListener('dragend', function (event) {
  var x = event.clientX;
  var y = event.clientY;
  localStorage.setItem('x', x);
  localStorage.setItem('y', y);
});

在这个示例中，我们使用 localStorage 存储了红色 div 的位置信息，每次拖拽结束都会更新保存的位置信息。在页面加载时，我们首先从 localStorage 中读取之前保存的位置信息，如果存在则设置红色 div 的位置为保存的位置。这样，每次重新进入该页面时，红色 div 就会出现在最后一次拖拽松开时的位置。