JS基础-20-本地存储

本地存储

将web页面中的数据存放到本地

特性

1、数据存储在用户浏览器中

2、设置、读取方便、甚至页面刷新不丢失数据

3、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，可以将对象JSON.stringify() 编码后存储

将json格式的字符串转换为对象 JSON.parse()

window.localStorage

1、可以永久存放到本地，但只要清除浏览器缓存，就会删除数据， 否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3. 以键值对的形式存储使用

		// 存储数据
        localStorage.name = "姓名"
        localStorage["sex"] = "性别"
        localStorage.setItem("height", "身高")
        console.log(localStorage);

        //获取数据
        document.write("<h1>" + localStorage.name + "</h1>")
        document.write("<h1>" + localStorage['sex'] + "</h1>")
        document.write("<h1>" + localStorage.getItem("height") + "</h1>")

        //删除数据
        localStorage.removeItem("height")
        console.log(localStorage);

        //清空数据（清除所有数据）
        localStorage.clear()
        console.log(localStorage);

输出内容：

window.sessionStorage

1.本地存储的数据当次有效，只要关闭页面就会将数据清除掉
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用

		// 存储数据
        sessionStorage.name = "姓名"
        sessionStorage["sex"] = "性别"
        sessionStorage.setItem("height", "身高")
        console.log(sessionStorage);

        //获取数据
        document.write("<h1>" + sessionStorage.name + "</h1>")
        document.write("<h1>" + sessionStorage['sex'] + "</h1>")
        document.write("<h1>" + sessionStorage.getItem("height") + "</h1>")

        //删除数据
        sessionStorage.removeItem("height")
        console.log(sessionStorage);

        //清空数据（清除所有数据）
        sessionStorage.clear()
        console.log(sessionStorage);