美文网首页
用localStorage来存储数据(转载学习)

用localStorage来存储数据(转载学习)

作者: 糖醋里脊120625 | 来源:发表于2019-06-26 16:28 被阅读0次

localStorage:
是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存

sessionStorage:
用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。

localStorage与sessionStorage具有相同的API,以下方法都可以用于sessionStorage

localStorage存储方法
localStorage.name ='vanida;

localStorage["name"]='vanida';

localStorage.setItem("name","vanida");

//这三种设置值方式是一样的;

localStorage获取值方法


var name = localStorage["name"]

var name= localStorage.name

var name= localStorage.getItem("name");

//这三种获取值方式是一样的;

localStorage清除特定值方法

//清除name的值
localStorage.removeItem("name");

localStorage.name='';

localStorage清除所有值方法

localStorage.clear()


localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify();


var person = {name:"vanida","sex":"girl","age":25};

localStorage.setItem("person",JSON.stringify(person));

// localStorage.person="{"name":"vanida","sex":"girl","age":25}"

注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy!

然后取出person的对象你可以用JSON.parse();


person = JSON.parse(localStorage.getItem("person"));

// {name: "vanida", sex: "girl", age: 25}

相关文章

  • 用localStorage来存储数据(转载学习)

    localStorage:是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览...

  • TodoList-React

    要实现的功能 localStorage存储数据 使用localStorage存储用户数据,异步更新数据,实现在使用...

  • web存储、应用缓存、web workers

    客户端存储数据 两种方式: localStorage-没有时间限制的数据存储存储特点: localStorage方...

  • 2018-06-22

    localStorage--如何存储json数据? localStorage--如果直接将json存储在local...

  • 本地存储 与 cookie

    一、本地存储: (1)localStorage 保存数据:localStorage.setItem(key,...

  • Vue数据存储和页面传值

    数据存储和页面传值 数据存储 Vue 数据存储方法有Vuex、LocalStorage、SessionStorag...

  • 购物车

    web本地存储主要有两种方式: LocalStorage:localStorage 方法存储的数据没有时间限制。第...

  • localStorage本地缓存

    清空localStorage (clear) 存储数据 (setItem) 读取数据 (getItem) 删除某个...

  • localStorage存储数据

    介绍 localStorage: localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上...

  • HTML5 Web 存储(localStorage 和 sess

    localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage...

网友评论

      本文标题:用localStorage来存储数据(转载学习)

      本文链接:https://www.haomeiwen.com/subject/hwoccctx.html