localStorage的用法
1.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,前者是一直存在本地的,后者是伴随着session,窗口一旦关闭就消失了。二者用法完全相同
2.存储数据的方法就是直接给window.localStorage添加一个属性,localStorage里面的数据是以键值对的方式存在的,可以使用getItem()和setItem()方法设置和获取数据.
3. 向localStorage里存放多次存放相同对象名的数据时,需要先从localStorage里获取一个属性,如果该属性的值为null,则创建一个数组,存在的话,就把取出来的数据用JSON.parse()方法先转换成JSON,然后把数据存进去,存完后,再将取出来的数组,用JSON.stringify()方法将其转换成字符串形式存入.
var student = {
name:"lily",
age:20
}
var students = localStorage.students;
if(!students){
students = [];
}else{
students = JSON.parse(students);
}
students.push(student);
localStorage.players = JSON.stringify(players);
4.HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。
5.为什么要进行类型转换呢,localstorage本身不就会转换吗?是的,但是它是用toSting()强制转换的,转换后的是没有意义的字符串,或者说不是我们想要的,所以,为了数据取出来后能够操作,我们需要使用特殊的方法进行转换.下面是两者的区别
var student = {
name:"haha",
age:20
};
console.log(student.toString());//[object Object]
console.log(JSON.stringify(student));//'{"name":"haha","age":20}'有效的json字符串.
6.JSON.parse()是将一个**有效的字符串**解析成json对象.
localStorage的用法的更多相关文章
- sessionStorage和localStorage的用法,不同点和相同点
一,共同点 (1)存储时用setItem: localStorage.setItem("key","value");//以"key"为名称存 ...
- 浅谈localStorage的用法
今天接到一个任务,说是让自动调节textarea标记的输入高度,而且还要记录下来,下次登录的时候还是调节后的高度,我第一时间就想到了localStorage的用法,直接代码献上: <html l ...
- localStorage/cookie 用法分析与简单封装
本地存储是HTML5中提出来的概念,分localStorage和sessionStorage.通过本地存储,web应用程序能够在用户浏览器中对数据进行本地的存储.与 cookie 不同,存储限制要大得 ...
- window.localStorage的用法
一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...
- HTML5跳转页面并传值以及localStorage的用法
1.首先,你得在那个页面把数据存入localStorage中吧.这个是必须的! localStorage.setItem("user",JSON.stringify(data.al ...
- localStorage sessionStorage 用法
sessionStorage.getItem('key') // 获取 sessionStorage.setItem('key','value') //设置 sessionStorage.remove ...
- HTML5上的LocalStorage基本用法
1.获取localStorage的长度:window.localStorage.length 2.添加/编辑localStorage的内容:window.localStorage.setItem(键, ...
- 【前端开发】localStorage的用法
localStorage.setItem("name","value") //存储name的值 var type = localStorage.getItem ...
- 轻松实现localStorage本地存储
相信大家都知道HTML5提供了localStorage和sessionStorage两个新功能,基于这两个功能我们可以实现web资源的离线和会话存储,如果你现在还在用Cookie来临时存储网络资源的话 ...
随机推荐
- uva10129 PlayOnWords(并查集,欧拉回路)
判断无向图是否存在欧拉回路,就是看度数为奇数的点有多少个,如果有两个,那么以那分别两个点为起点和终点,可以构造出一条欧拉回路,如果没有,就任意来,否则,欧拉回路不存在. 首先用并查集判断连通,然后统计 ...
- [web笔记]解决跨域问题以及axios每次提交session变化的问题
- 《队长说得队》第九次团队作业:Beta冲刺与验收准备
项目 内容 这个作业属于哪个课程 >>2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 >>实验十三 团队作业9:Beta冲刺与团队项目验收 团队名 ...
- Js 数组去重的几种方法总结
去重是开发中经常会碰到的一一个热点问题,不过目前项目中碰到的情况都是后台接口使用SQL去重,简单高效,基本不会让前端处理去重.那么前端处理去重会出现什么情况呢?假如每页显示10条不同的数 ...
- 【点分治】luoguP2664 树上游戏
应该是一道中等难度的点分?麻烦在一些细节. 题目描述 lrb有一棵树,树的每个节点有个颜色.给一个长度为n的颜色序列,定义s(i,j) 为i 到j 的颜色数量.以及 现在他想让你求出所有的sum[i] ...
- 【dp】饥饿的牛
普通dp题 题目描述 牛在饲料槽前排好了队.饲料槽依次用1到n(1 ≤ n ≤ 2000)编号.每天晚上,一头幸运的牛根据约翰的规则,吃其中一些槽里的饲料. 约翰提供b个区间的清单.一个区间是一对整数 ...
- 1、python-初探
语言包括编译型语言和解释型语言编译型:全部翻译,再执行:c.c++解释型:边执行边翻译:python.php.java.c#.perl.ruby.javascript 一.系统位数32位系统内存的最大 ...
- Tomcat Bug记录
1.问题:org.apache.tiles.request.render.CannotRenderException: ServletException including path '/WEB-IN ...
- LeetCode(203) Remove LinkedList Elements
题目 Remove all elements from a linked list of integers that have value val. Example Given: 1 –> 2 ...
- 2018 Multi-University Training Contest 1 Distinct Values(set)
题意: t组数据,每组数据给定n,m, 表示有m个约束,每个约束包含 x,y ,代表区间 [x, y] 里的数字不能相同. 让你用所有的正整数构成一个长度为 n 的区间,使得这个区间元素顺序的字典序最 ...