cookie、SessionStorage、Localstorage快速入门先说说cookie的区别：数据大小不能超过4KB。不管有没有需求，cookie数据都会在HTTP请求中携带，在浏览器和服务器之间来回传递，占用资源。可以在后台设置中修改，数据只保存在本地浏览器中。cookie数据可以设置为路径，限制cookie只属于某个路径。默认数据失效是关闭浏览器，也可以设置失效时间sessionStorage：数据大小为5M或更大。它不会跟随HTTP请求，所以不会占用资源。只有当浏览器关闭时，数据才会存储在浏览器中，当窗口关闭时数据会被销毁。可以说，“临时存储”sessionStorage不会在不同的浏览器窗口共享数据，即使打开同一个页面。localStorage：数据大小为5M或更大。它不会跟随HTTP请求，所以不会占用资源。数据保存在本地硬件设备（通常指硬盘，也可以是其他），需要用户主动删除，否则会永久保存。不同浏览器之间不共享数据。Cookies的使用方法Cookies可以编写封装，也可以直接使用已经写好的框架。这里推荐一个'jquery.cookies.2.2.0.min.js'；注意还有一个cookie.js，个人觉得没有“jquery.cookies.2.2.0.min.js”好用。先说说JavaScript的原生用法。Cookie以名称/值对的形式存储，例如username=JohnDoe。这里的数据是字符串类型的。如果是其他格式，注意格式转换。JavaScript可以使用document.cookie属性来创建、读取和删除cookie。在JavaScript中，创建cookie如下所示：document.cookie="username=JohnDoe";您还可以向cookie添加过期时间（UTC或GMT时间）。默认情况下，cookie在浏览器关闭时被删除：document.cookie="username=JohnDoe;expires=Thu,18Dec201312:00:00GMT";您可以使用路径参数告诉浏览器cookie的路径。默认情况下，cookie属于当前页面。document.cookie="username=JohnDoe;expires=2013年12月18日星期四12:00:00GMT;path=/";设置cookie函数setCookie(cname,cvalue,exdays){varSetTime=newDate();//设置过期时间SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000));//设置过期时间varexpires="expires="+SetTime.toGMTString();//设置过期时间document.cookie=cname+"="+cvalue+";"+expires;//createacookie}readcookiefunctiongetCookie(c_name){if(document.cookie.length>0){c_start=document.cookie.indexOf(c_name+"=")if(c_start!=-1){c_start=c_start+c_name.length+1c_end=document.cookie.indexOf(";",c_start)if(c_end==-1)c_end=document.cookie.length返回unescape(document.cookie.substring(c_start,c_end))}}return""}删除cookie并将cookie的有效时间改为昨天。cookies.js注意这里使用的是cookies.js。请注意cookies.js不是cookie.js。它们是两个不同的插件，很容易混淆。对，“jquery.cookies.2.2.0.min.js”添加/修改cookie并设置过期时间：`$.cookies.set('cookie_id','cookie_value',{hoursToLive:10});这里设置过期时间为10小时。您还可以像这样设置过期时间：expireDate=newDate();expireDate.setTime(expireDate.getTime()+(10*60*60*1000));$.cookies.set('cookie_id','cookie_value',{expiresAt:expireDate});获取cookie$.cookies.get('cookie_id');删除cookie$.cookies.del('cookie_id');SessionStorage的使用H5对web存储的支持非常友好，使用方法很简单sessionStorage.getItem(keyName);//获取指定key的本地存储值//或varkeyName=sessionStorage.key;sessionStorage.setItem(keyName,value);//将值存入key字段//或sessionStorage.keyName='value';sessionStorage.removeItem(keyName);//删除指定ke的本地存储值sessionStorage.clear();//清除所有键值，慎用，慎用，慎用，会清除所有，删除其他网页的存储。localStorage的用法与sessionStorage基本相同；localStorage.getItem(keyName);//获取指定key本地存储的值//或varkeyName=sessionStorage.key;localStorage.setItem(keyName,value);//将值存储在键字段中//或localStorage.keyName='value';localStorage.removeItem(keyName);//删除指定的本地存储的值kelocalStorage.clear();//清除所有key,values,慎用,慎用,慎用,会清空所有,并删除其他网页的存储
