字数
434 字
阅读时间
2 分钟
cookie、localStorage 和 sessionStorage
都有同源策略的限制，常见的使用 postMessage 解决
相关 API
cookie
javascript
// cookie
// 设置cookie，客户端可以设置cookie 的下列选项：expires、domain、path、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功），但无法设置HttpOnly选项
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
// 读取cookie，只能读取 非HttpOnly 类型的cookie，字符串类型，cookie通过一个分号+空格的形式串联起来
var x = document.cookie;
// 修改cookie，但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值，而是添加了一个新的 cookie
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
// 删除cookie，把要删除的cookie的过期时间设置成已过去的时间,path/domain/这几个选项一定要旧cookie 保持一样
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";localstorage 和 sessionstorage
javascript
// localStorage和sessionStorage的一些方法：
// 添加键值对： setItem(key,value);
// 获取键值对： getItem(key);
// 删除键值对： removeItem(key);
// 清除所有键值对： clear();
// 获取属性名称（键名称）： key(index);
// 获取键值对的数量： length;
#localStorage 的存取方式
localStorage.age = 88; // 用localStorage属性的方式来添加条目
localStorage.setItem("animal","cat"); // 推荐使用setItem的方式存储一个名为animal，值为cat的数据
var animal = localStorage.getItem("animal"); //读取本地存储中名为animal的数据，并赋值给变量animal
console.log(animal);
localStorage.removeItem("animal"); //删除单条数据
localStorage.clear(); //清除所有数据
#sessionStorage 的存取方式
sessionStorage.work = "police";
sessionStorage.setItem("person", "Li Lei");
var person = sessionStorage.getItem("person");
console.log(person);贡献者
jiechen