web端存储的几种方式
1、userdata存储，只适用于ie，每个页面只能存储64kb，该域名网站最多存储640kb；
userdata重点使用语法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <script type="text/javascript"> /** @class 定义userdata的操作 */ var UserData = { // 定义userdata对象 o : null, // 设置文件过期时间 defExps : 365, // 初始化userdate对象 init : function(){ if(!UserData.o){ try{ //创建userData存储 UserData.o = document.createElement('input'); UserData.o.type = "hidden"; UserData.o.style.behavior = "url('#default#userData')" ; // UserData.o.addBehavior ("#default#userData"); document.body.appendChild(UserData.o); }catch(e){ return false; } }; return true; }, // 保存文件到userdata文件夹中 f-文件名，c-文件内容，e-过期时间 save : function(f, c, e){ if(UserData.init()){ var o = UserData.o; // 保持对象的一致 o.load(f); // 将传入的内容当作属性存储 if(c) o.setAttribute("code", c); // 设置文件过期时间 var d = new Date(), e = (arguments.length == 3) ? e : UserData.defExps; d.setDate(d.getDate()+e); alert(d); o.expires = d.toUTCString(); // 存储为制定的文件名 o.save(f); } }, // 从uerdata文件夹中读取指定文件，并以字符串形式返回。f-文件名 load : function(f){ if(UserData.init()){ var o = UserData.o; // 读取文件 o.load(f); // 返回文件内容 return o.getAttribute("code"); } }, // 检查userdata文件是否存在 f-文件名 exist : function(f){ return UserData.load(f) != null; }, // 删除userdata文件夹中的指定文件 f-文件名 remove : function(f){ UserData.save(f, false, -UserData.defExps); } // UserData函数定义结束 }; window.onload=function(){ var boxDom=document.getElementById("box"); var testPDom=document.getElementById("testP"); var inputDom=boxDom.getElementsByClassName("inputTxt"); var btnDom=document.getElementById("btn"); inputDom[0].onblur=function(){ var val=this.value; if(val != null || val != ""){ testPDom.innerText=val; UserData.save("name",val,2); console.log("保存成功"); } } //都去存储的userData数据 btnDom.onclick=function(){ alert(UserData.load("name")); inputDom[0].value=UserData.load("name"); } } </script> <body> <div id="box"> <input type="text" class="inputTxt"> <button type="button" id="btn">保存</button> </div> <p id="testP"></p> </body> </html>
上述代码（在网上粘贴而来）在新版ie浏览器运行起来，会报错“SCRIPT438: 对象不支持“load”属性或方法”；但是你如果用ie仿真模式ie10以下浏览器是可以保存成功的。
2、cookie存储方式；
特点：在会话结束时到期，也可以设置时间戳控制到期时长；如果要传到后台读取，key/value需要url编码，通过请求头储存并http请求到后端(浏览器自发的)；大小4kb，不同浏览器个数也有限制；（https://segmentfault.com/a/1190000004743454该篇博客很全）
实例（创建cookie，通过node服务接收）
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <script type="text/javascript"> //cookieUtil.js var cookieUtil = { //读取"name"对应cookie的值 get : function(name){ var cookieName = encodeURIComponent(name)+"=", //对传入name参数URL编码 cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if(cookieStart > -1){ var cookieEnd = document.cookie.indexOf(";",cookieStart); if(-1 == cookieEnd){ cookieEnd = document.cookie.length; //cookie值为空 } //对cookie保存的值URL解码 cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd)); } return cookieValue; }, //创建或设置cookie其中name将作为某一域内的唯一标示、不可更改 set : function(name,value,expires){ //对名称和值URL编码 var cookieText = encodeURIComponent(name)+"="+encodeURIComponent(value); if(expires instanceof Date){ cookieText += "; expires="+expires.toGMTString(); } //将根据name是否存在决定是否添加新的cookie字符串，需要注意：a、cookie长度（limit：4095B）；b、每个域允许的cookie个数（各浏览器决定） document.cookie = cookieText; }, //删除cookie unset : function(name,path,domain,secure){ this.set(name,"",new Date(0),path,domain,secure); } } cookieUtil.set("username",user,30); </script> <body></body> </html>
node服务代码：
var http = require('http');
var express = require("express");
var app = express();
app.use(express.static("web"));
http.createServer(function (req, res) {
// 获得客户端的Cookie
var Cookies = {};
req.headers.cookie && req.headers.cookie.split(';').forEach(function( Cookie ) {
var parts = Cookie.split('=');
Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || '' ).trim();
});
console.log(Cookies)
// 向客户端设置一个Cookie
res.writeHead(200, {
'Set-Cookie': 'myCookie=test',
'Content-Type': 'text/plain'
});
res.end('Hello World\n');
}).listen(8887);
3、localstorage存储方式；
特点：存储的值是字符串格式，大小一般在5mb左右，能永久性存储；
写入语法：
window.localStorage["j"]=1;
window.localStorage.d=2;
window.localStorage.setItem("j",3);
读取语法：
window.localStorage["j"];
window.localStorage.d;
window.localStorage.getItem("j");
修改语法跟写入语法一样，只是修改键值；
删除语法：
window.localStorage.clear();
window.localStorage.removeItem("j");
4、sessionStorage储存方式；
特点：
(临时保存同一窗口或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")
语法：
sessionStorage.key(int index) ：返回当前 sessionStorage 对象的第index序号的key名称。若没有返回null。
sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。
sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。
sessionStorage.clear() ：清除 sessionStorage 对象所有的项。
5 Application cache的用法（应用缓存）
浙公网安备 33010602011771号