关于HTML5离线应用和客户端cookie

关于HTML5离线应用和客户端cookie

1.客户端cookie
var cookieKey = "";
var cookieValue ="";
document.cookie = "name=huangzuowen";
var cookies = document.cookie.split(";");
var cookie;
for (var i = 0, cookieLen = cookies.length; i < cookieLen; i++) {
cookie = cookies[i].trim().split("=");
if (!cookie || (cookie.length < 2)) {
continue;
}
if (cookie[0] == "name") {
cookieKey = cookie[0];
cookieValue = cookie[1];
}
}
console.log('cookieKey='+cookieKey+'，'+'cookieValue='+cookieValue);

从上面的代码我们可以看出，我们要读取或者修改或者删除指定 cookie 的值都不是很直观方便，因此我们可以封装一些方法，方便我们对 cookie 的操作：

var CookieUtil = {

get: function (name) {

var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName),

cookieValue = null, cookieEnd;

if (cookieStart > -1) {

cookieEnd = document.cookie.indexOf(";", cookieStart);

if (cookieEnd == -1) { cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); } return cookieValue; },

set: function (name, value, expires, path, domain, secure) {

var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString(); }

if (path) { cookieText += "; path=" + path; } if (domain) { cookieText += "; domain=" + domain; } if (secure) { cookieText += "; secure"; } document.cookie = cookieText; },

unset: function (name, path, domain, secure) {

this.set(name, "", new Date(0), path, domain, secure); } };

// 设置 cookie CookieUtil.set('name', 'lai'); CookieUtil.set('sex', 'man');

// 读取 cookie CookieUtil.get('name'); // 'lai' CookieUtil.get('sex'); // 'man'

// 删除 cookie CookieUtil.unset('name'); CookieUtil.unset('sex');

// 设置 cookie，包括它的路径、域、失效日期 CookieUtil.set('name', 'lai', '/', 'www.laixiangran.cn', new Date());

2.localStorage*sessonStorage

//localStorage： 域内安全、永久保存。即客户端或浏览器中来自同一域名的所有页面都可访问localStorage数据且数据除了删除否则永久保存，但客户端或浏览器之间的数据相互独立。
//sessonStorage：会话控制、短期保存。会话概念与服务器端的session概念相似，短期保存指窗口或浏览器或客户端关闭后自动消除数据。
//1.2.1：本地客户端存储一个字符串类型的数据
localStorage.setItem("name", "huangzuowen");
sessonStorage.setItem("name", "huangzuowen");
//1.2.2：获取已存储在本地的数据
localStorage.getItem("name");
sessonStorage.getItem("name");
//1.2.2：移除已存储在本地的数据
localStorage.removeItem("coffeeType");
sessonStorage.removeItem("coffeeType");
//1.2：移除本地存储所有数据
localStorage.clear();
sessonStorage.clear();

posted @ 2016-09-09 11:49 </> 阅读( ...) 评论( ...) 编辑 收藏