HTML笔记 ·

localStorage和sessionStorage用法小总结

在客户端存储数据

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 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。

参与评论