1，b/s 开发中经常会使用到 cookie，大部分情况下，都是由后端代码实现，那么 js 怎么实现对 cookie 的操作呢？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>cookie</title> </head> <style type="text/css"> input { width: 200px; height: 30px; text-align: center; line-height: 30px; font-size: 14px; border: none; } </style> <body> <input id="old-text" type="text" /> <input id="writer" type="button" value="写入或修改COOKIE" /> <input id="new-text" type="text" /> <input id="reader" type="button" value="读取COOKIE" /> <input id="delete" type="button" value="删除COOKIE" /> </body> <script type="text/javascript"> // 封装操作 cookie 的方法，主要依赖于 document.cookie，比较简单 var cookie = function (name, value, options) { if (typeof value != "undefined") { options = options || {}; if (value === null) { value = ""; options.expires = -1 } var expires = ""; if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) { var date; if (typeof options.expires == "number") { date = new Date(); date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)) } else { date = options.expires } expires = "; expires=" + date.toUTCString() } var path = options.path ? "; path=" + (options.path) : ""; var domain = options.domain ? "; domain=" + (options.domain) : ""; var secure = options.secure ? "; secure" : ""; document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("") } else { var cookieValue = null; if (document.cookie && document.cookie != "") { var cookies = document.cookie.split(";"); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); if (cookie.substring(0, name.length + 1) == (name + "=")) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break } } } return cookieValue; } }; // 写入或者修改 document.getElementById('writer').onclick = function(){ cookie('text', document.getElementById('old-text').value); } // 读取 document.getElementById('reader').onclick = function(){ document.getElementById('new-text').value = cookie('text'); } // 删除 document.getElementById('delete').onclick = function(){ cookie('text', null); } /* 其他配置参数 cookie("Key", "Value", { expires: 7, // 有效期, 单位天, 默认 -1，页面关闭失效 path: "/", // cookie 存放的路径, 默认为当前页面路径, 跨页面读取可设置为根目录, 或者显示设置 path domain: // Cookie的域名属性，默认是创建该cookie的页面域名,一般不设置 secure: true // cookie的传输是否要求一个安全协议，例如HTTPS, 默认为 fasle }); */ </script> </html>
2，H5 新增加的两个 api：sessionStorage，localStorage 他们都遵循 key value 的形式，并且 key value 都只能为字符串
3，分别都有两个方法如 sessionStorage.setItem(key, value) 和 sessionStorage.getItem(key) 使用方法也是相当简单
4，不同的是 sessionStorage 的值在页面关闭后马上失效，localStorage 只要不清理便永远存在
5，localStorage 有储存上限，不同的浏览器各不相同，大约为 2M 左右