localStorage和sessionStorage用法小总结

2017-11-08 03:32:36

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。先看一下他的API都有什么

1. clear方法--清空当前网站的localStorage上存储的所有数据 localStorage.clear() // undefined localStorage // Storage {length: 0}
2. setItem方法--向localStorage上存储数据 localStorage.setItem("name","落帆亭") //存储名字为name值为caibin的变量 localStorage.name = "落帆亭"; // 等价于上面的命令 localStorage // Storage {name: "caibin", length: 1}
3. getItem方法--读取localStorage数据 localStorage.getItem("name") //落帆亭,读取保存在localStorage对象里名为name的变量的值 localStorage.name // "落帆亭" localStorage.valueOf() //读取存储在localStorage上的所有数据 localStorage.key(0) // 读取第一条数据的变量名(键值) //遍历并输出localStorage里存储的名字和值 for(var i=0; i<localStorage.length;i++){ console.log('localStorage里存储的第'+i+'条数据的名字为：'+localStorage.key(i)+',值为：'+localStorage.getItem(localStorage.key(i))); }
4. removeItem方法--删除某个具体变量 localStorage.removeItem("name"); //undefined localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了
5. hasOwnProperty方法--检查localStorage上是否已经保存了x，需要传入x作为参数 localStorage.hasOwnProperty('name') //前提是上面的那个name没有删除，返回true localStorage.hasOwnProperty('sex') // false
6. tolocalString方法--将数组转化为本地字符串 localStorage可以将一个数组直接保存进去，但是存入以后就自动转为了字符串，中间会用逗号分隔 var arr = ['aa','bb','cc']; // ["aa","bb","cc"] localStorage.arr = arr //["aa","bb","cc"] localStorage.arr[0];//"a" localStorage.arr.toLocaleString(); // "aa,bb,cc"
7. 将JSON对象存储到localStorage中 var students = { xiaomin: { name: "xiaoming", grade: 1 }, teemo: { name: "teemo", grade: 3 } } students = JSON.stringify(students); //将JSON转为字符串存到变量里 console.log(students); localStorage.setItem("students",students);//将变量存到localStorage里 var newStudents = localStorage.getItem("students"); newStudents = JSON.parse(students); //转为JSON console.log(newStudents); // 打印出原先对象 sessionStorage 方法 sessionStorage方法和localStorage方法相同，只是将localStorage替换为sessionStorage即可，用法这里就不在赘述了。但是sessionStorage于localStorage的本质区别在于sessionStorage方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。