一、Web的项目存储
Web项目中需要的存储：
- 服务器存储：
数据库：存储项目核心数据
session技术：存储当前用户的信息
- 客户端存储：
cookie存储：大小限制在4kb,通过请求，服务端返回一个cookieID存在浏览器缓存中，占用了宽带，浏览器通用
IE6限制每个域名20个cookies
userData是IE的59专用特性，用的人较少，现在用的最多的flash的本地存储，空间是cookie的25倍，被淘汰了
Google Gears : 存储大小没有任何限制，但是需要额外安装插件，
IndexedDB技术: 客户端直接存储对象，目前还不是html的标准，大小没有任何限制
HTML5 Webstroage技术： 使用简单，大小不能超过8mb
- Web会话:客户端浏览器从连接某个Web服务器开始，一系列的响应过程，直到客户端关闭浏览器，会话结束
Web项目中需要的存储方式：以key-value的形式存储，KV对，键值对
- sessionStroage 会话级别的存储 数据存储只会在当前会话中，关闭浏览器数据消失
SessionStroage.length 查看当前存储的数据个数
SessionStroage[‘key’] = ‘value’ 存储一个数据
var a = SessionStroage[‘key’] 读取一个数据
SessionStroage.getItem(‘key’) 读取一个数据
SessionStroage.setItem(‘key’,‘value’) 存储一个数据
SessionStroage.removeItem(‘key’) 删除指定数据
SessionStroage.clear() 删除所有数据
- localStorage本地/跨会话存储 浏览器关闭数据依然存在
localStorage.length 查看当前存储的数据个数
localStorage[‘key’] = ‘value’ 存储一个数据
var a = localStorage[‘key’] 读取一个数据
localStorage.getItem(‘key’) 读取一个数据
localStorage.setItem(‘key’,‘value’) 存储一个数据
localStorage.removeItem(‘key’) 删除指定数据
localStorage.clear() 删除所有数据
二、存储应用——留言板
<body>
<div>
<textarea id="texta" cols="30" rows="10"></textarea>
</div>
<div>
<input type="button" value="发表" onclick="fun()" />
<input type="button" value="清除" onclick="fun1()" />
</div>
<div id="dcon"></div>
<script>
if(localStorage.getItem("k_con")!=null){
document.getElementById("dcon").innerHTML = localStorage.getItem("k_con");
}
function fun(){
var texta = document.getElementById("texta").value;
var dcon = document.getElementById("dcon");
dcon.innerHTML += `<div>${texta}</div>`;
document.getElementById("texta").value = '';
localStorage.setItem("k_con",dcon.innerHTML)
}
function fun1(){
localStorage.clear()
document.getElementById("dcon").innerHTML = ''
}
</script>
</body>
三、存储应用——登录信息存储
<body>
<script>
var n = sessionStorage['LoginName'];
if(n){
location.href = "02index.html";
}
</script>
<h3>用户登录</h3>
用户名：<input type="text" id="uname" />
密码：<input type="password" id="upwd" />
<input type="submit" id="btnsubmit" value="提交" />
<script>
var btnsubmit = document.getElementById("btnsubmit");
btnsubmit.onclick = function(){
alert("登录成功");
var uname = document.getElementById("uname").value;
sessionStorage['LoginName'] = uname;
setTimeout(function(){
location.href = "02index.html";
},3000)
}
</script>
</body>
<body>
<h3>退出登录</h3>
<p>退出登录成功！3秒钟之后返回首页。。。</p>
<script>
sessionStorage.removeItem('LoginName');
setTimeout(function(){
location.href ="02index.html";
},3000)
</script>
</body>
