黑马程序员技术交流社区

标题: 【成都校区】-- localStorage 存储数据 [打印本页]

---

作者: 小刀葛小伦    时间: 2019-11-15 21:38
标题: 【成都校区】-- localStorage 存储数据
介绍localStorage：

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage：

sessionStorage仅在当前会话下有效，关闭页面或刷新浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

方法localStorage与sessionStorage具有相同的API，以下方法都可以用于sessionStorage
localStorage存储方法
//以“name”为名称存储一个值“Lee”，这三种设置值方式是一样的；localStorage.name = "Lee"；localStorage["name"] = "Lee"；localStorage.setItem("name","Lee");localStorage获取值方法
//获取名称为“name”的值，这三种获取值方式是一样的；var name = localStorage["name"];var name = localStorage.name;var name = localStorage.getItem("name");localStorage清除特定值方法
//清除name的值localStorage.removeItem("name");localStorage.name = "";localStorage清除所有值方法
//清除name的值 localStorage.clear();作用域

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

实例

localStorage只能存储字符串，如果需要存储对象，首先要转化为字符串。利用JSON.stringify()；然后取出person的对象你可以用JSON.parse();

//存值var person = {"name":"Lee","sex":"boy","age":30};localStorage.setItem("person", JSON.stringify(person));// 值为字符串  '{"name":"Lee","sex":"boy","age":30}';//取值person = JSON.parse(localStorage.getItem("person"));
localStorage、sessionStorage共同点：都是保存在浏览器端，且同源的。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2