JavaScript之Web Storage

HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,功能比cookie强大,存储数据量也远大于cookie的4KB,官方建议为每个网站5MB,部分浏览器可支持到10MB甚至更多。

包括2个不同类型
sessionStorage:浏览器关闭后数据即失效
localStorage:数据永久有效


localStorage.变量名=值;

var value= localStorage.变量名;
以上用法要求变量名必须符合JS命名规范
sessionStorage用法与localStorage相同

写:
sessionStorage.name=“mike”;
sessionStorage.pass=“123”;
localStorage.name=“jerry”;
localStorage.pass=“456”;

读:
var name_s=sessionStorage.name;
var pass_s=sessionStorage.pass;
var name_l=localStorage.name;
var pass_l=localStorage.pass;
其中name、pass都是自定义的名称,只要符合JavaScript命名规范即可,且无需编解码

length:存储的键值对数量
setItem(key,value):写数据
getItem(key):根据key读数据
removeItem(key):根据key删除数据
clear():删除所有数据
key(index):获取index位置的key

<script type="text/javascript">
    function doWrite() {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;

        //存储到localStorage中
        localStorage.username = username;
        localStorage.password = password;

        //存储到sessionStorage中
        sessionStorage.sex = "男";
        sessionStorage.hobby = "game;movie";

        console.log("写入WebStorage成功!");
    }

    function doReadAll() {
        console.log(localStorage);
        console.log(sessionStorage); //注:sessionStorage只能在当前页面中访问,打开新标签中无法访问
    }

    function doReadLocalStorage(key) {
        // console.log(localStorage.key); //由于没有属性为"key"的,所以获取不到,此处key是变量,不能使用此方式
        console.log(localStorage.getItem(key));
    }

    function doReadSessionStorage(key) {
        // console.log(sessionStorage.key); //不能使用此方式
        console.log(sessionStorage.getItem(key));
    }
</script>

你可能感兴趣的:(JavaScript)