最近想自己随便做做的网页可以存储用户的行为，刷新时不会丢失，于是就看了下cookie和HTML5 web存储。
cookie#
cookie用于存储web页面的用户信息
- 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
- 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
cookie是以名值对形式存储
username=feng zhao
在JavaScript 中使用 document.cookie 属性来创建 、读取、及删除 cookie
（一）创建
document.cookie="username=John Doe; //创建的cookie
expires=Thu, 18 Dec 2013 12:00:00 GMT; // 过期时间，默认在浏览器关闭时删除
path=/"; //设置cookie路径，默认cookie属于当前路径
（二）修改
与创建的代码相同，将username=John Doe 换成 username=feng zhao 可达到修改的效果，旧的 cookie 将被覆盖。
（三）删除
同上，设置 expires 参数为以前的时间即可
HTML web存储#
使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
（只想说，刚接触的我并不理解上面这句，可能要我多实践才能理解吧）
localStorage 和 sessionStorage 对象
HTML主要使用上面这两个对象进行存储。
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session（进入网站到关闭浏览器所经过的这段时间） 的数据存储
目前，很多浏览器都支持storage，与cookie相同，使用键值对的形式进行存储。常用的一些API有
| 语法 | 效果 |
| -
| localStorage.setItem(key,value); | 保存数据 |
| localStorage.getItem(key); | 读取数据 |
| localStorage.removeItem(key); | 删除单个数据 |
| localStorage.clear(); | 删除所有数据 |
session的API就把local改成session
用法#
1.cookie##
使用cookie基本的两个函数是设置与获取cookie值
设置
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString(); //设置存在的时间
document.cookie = cname + "=" + cvalue + "; " + expires;
}
获取
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';'); //使用分号来分割 cookie 字符串
for(var i=0; i<ca.length; i++) //循环遍历寻找
{
var c = ca[i].trim(); //去除前后空格
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
2.storage##
这个相对cookie比较简单使用
通过使用API
localStorage.setItem(key,value);与localStorage.getItem(key);
就可以实现localstorage的设置与调取
Cookie, LocalStorage 与 SessionStorage三者异同
最后，我自己尝试用cookie写了一个实现记住账号记住密码功能的网页,没有使用加密，基本效果在本文开头可看。而且，通过写这一个又学到了不少东西。(以下东西与存储无关)
-
通过checked属性可以判断一个单选框是否被选中，其有两个值 true/false
if(document.getElementById("un").checked==true).... -
获取input文本框的值应该用val(),而不是text()会出来奇奇怪怪的东西
$("input[name='password']").val();
小结：通过三种存储方式的特点，可以决定他们的应用场景。
1.考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录
2.localstorage可以用来存储比较大的本地数据
网友评论