localstorage | 易学教程

HTML api学习笔记

阅读更多关于 HTML api学习笔记

HTML api学习拖放 <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); //阻止原生事件 } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); //为拖放事件ev添加data } function drop(ev) { ev.preventDefault(); //阻止原生事件 var data = ev.dataTransfer.getData("text"); //从事件ev中读取data ev.target.appendChild(document.getElementById(data)); //利用data中的元素id构建标签完成拖放 } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> //ondragover拖放结束 <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

JS之Cookie、localStorage与sessionStorage

阅读更多关于 JS之Cookie、localStorage与sessionStorage

基本概念： cookie：是指Web浏览器存储的少量数据，同时它是与具体的Web页面或者站点相关的。 localStorage：用于长期保存整个网站的数据，保存的数据没有过期时间，直到手动删除。属性是只读。 sessionStorage：用于临时保存同一个窗口（或标签页）的数据，在关闭窗口或者标签页之后将删除这些数据。直接上图看三者的区别与相同点 localStorage与sessionStorage存储API localStorage.setItem('x' ,1) // 以'x'为名字存储一个数值 localStorage.getItem('x') //获取数值 localStorage.removeItem('x') // 删除'x'项 localStorage.clear() // 全部删除 cookie的使用 JavaScript可以使用document.cookie属性来创建、读取及删除cookie. var x = document.cookie; // 读取 tips: document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT;

本地存储localStorage和sessionStorage

阅读更多关于本地存储localStorage和sessionStorage

cookie劣势：存储大小限制，4kb 单域名下有数量限制，50个左右污染请求头，浪费流量本地存储web storage 包括localStorage和sessionStorage localStorage 本身是一个对象，可以打印查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> console.log(localStorage); </script> </body> </html> setItem() 设置存储内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>localStorage</title> </head> <body> <script> localStorage.setItem("cyy",25); console.log(localStorage); </script> </body> </html> 将赋值语句注释，关闭网页后再次打开，存储的数据依旧存在 getItem() 获取存储内容 <!DOCTYPE html> <html lang="en"> <head> <meta

Chrome

阅读更多关于 Chrome

现今介绍HTML 5的数据很多，本地存储是一个亮点。我只是做一点额外发现的补充。 1、chrome本地存储查看本地存储可以分为WebStorage(Local Storage & Session Storage)、SQLLite，使用chrome浏览器的时候，按F12->Resources，就能看到Databases和Local Storage、Session Storage，如果浏览的网站使用了本地存储那么相应的信息也会有。有趣的是，oschina在Local Storage那里有一项my.oschina.net，可能调用了，但是没有设置值。 2、清除本地储存本地存储的使用，在多数HTML 5教程里面是都有提到。那么删除本地存储呢？？shift+ctrl+del，chrome就会弹出删除缓存的弹窗，勾选“ 删除 Cookie 以及其他网站数据和插件数据 ”删除。可是，这只是删除了WebStorage。SQLLite的数据还在！！！！使用drop database没有用？？！没办法，因为SQLite只是一个内嵌的数据库，你的数据库其实包含在一个文件里面，如果你硬要删除这个数据库就只能删除文件。 3、删除SQLLite 先找到SQLLite存储的地方: Windows Vista or 7: \Users\_username_\AppData\Local\Google

手把手教你开发Chrome扩展三：关于本地存储数据

阅读更多关于手把手教你开发Chrome扩展三：关于本地存储数据

手把手教你开发chrome扩展一：开发Chrome Extenstion其实很简单手把手教你开发Chrome扩展二：为html添加行为手把手教你开发Chrome扩展三：关于本地存储数据 HTML5中的localStorage localStorage与cookie类似，它是存储在客户端浏览器中的数据，它与cookie不同的一点是它没有时间限制。localStorage属于html5中的新特性，在浏览器支持localStorage统计中，Chrome4+、Firefox3.5+、IE8+、IE7兼容模式、Safari4+、Opera10.5+都是支持localStorage的。以下代码可以用于检测你的浏览器是否支持localStorage： ? if(window.localStorage){ alert('你的浏览器支持localStorage!'); }else{ alert('浏览器不支持localStorage!'); } localStorage是以key/value方式来进行存储的，并且value只能是字符串形式，如果你要使用其他数据类型，需要进行相应的转换。设置和获取localStorage方法是使用localStorage. key ，或localStorage[ key ]的形式，如： ? localStorage.myName='walkingp';

商城项目日结5

阅读更多关于商城项目日结5

今天完成了商城的购物车功能，并细化了css样式使页面看起来更加舒适。项目地址购物车代码如下： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="../css/reset.css"> <link rel="stylesheet" href="../css/common.min.css"> <link rel="stylesheet" href="../css/index.css"> <link rel="stylesheet" href="../css/footer.css"> <link rel="stylesheet" href="../css/cart.css"> </head> <body style="background-color: #fff;">  <div class=

浏览器端存储技术简介

阅读更多关于浏览器端存储技术简介

Cookie Cookie 是指存储在用户本地终端上的数据，同时它是与具体的 Web 页面或者站点相关的。Cookie 数据会自动在 Web 浏览器和 Web 服务器之间传输，也就是说 HTTP 请求发送时，会把保存在该请求域名下的所有 Cookie 值发送给 Web 服务器，因此服务器端脚本是可以读、写存储在客户端的 Cookie 的操作。 LocalStorage 在 HTML5 中，新加入了一个 localStorage 特性，这个特性主要是用来作为本地存储来使用的，解决了 Cookie 存储空间不足的问题(Cookie 中每条 Cookie 的存储空间为 4k)，localStorage 中一般浏览器支持的是 5M 大小，这个在不同的浏览器中 localStorage 会有所不同。 SessionStorage SessionStorage 与 LocalStorage 的唯一一点区别就是 LocalStorage 属于永久性存储，而 SessionStorage 属于当会话结束的时候，SessionStorage 中的键值对就会被清空。 UserData、GlobalStorage、Google Gear 这三种的使用都有一定的局限性，例如 userData 是 IE 浏览器专属，它的容量可以达到 640K，这种方案可靠，不需要安装额外插件，只不过它仅在IE下有效

使用浏localstorage缓存小说记录

阅读更多关于使用浏localstorage缓存小说记录

使用localstorage最大的好处很多,一个很基本的就是,存储的数据量比较大另外它存储的值,只能是字符串,所以如果你想存入什么对象,或者数组,就不行了..不过可以把对象转为json字符串存储所以一般用法就是先调用window.storage,把数据对象->字符串,字符串存值,使用setItem方法 var storage=window.localStorage; var bookcase={"0":data};//定义好对象 //对象转为json字符串 bookcase_str=JSON.stringify(bookcase); //localstorage存储键值 storage.setItem('bookcase',bookcase_str); 取值的话呢,也很方便啦,也就是getItem方法,然后把字符串换位对象,就完事儿了... var storage=window.localStorage; if(storage.getItem("bookcase")){ //获取值,转化为对象 var bookcase_str=storage.getItem("bookcase"); var bookcase_obj=JSON.parse(bookcase_str); } 就是勒么的方便,下面就是自己代码中的一些实际操作. function LastRead(){ var

前端基础-HTTP,HTML,浏览器

阅读更多关于前端基础-HTTP,HTML,浏览器

前端基础一、HTTP,HTML,浏览器 1、说一下 http 和 https https 的 SSL 加密是在传输层实现的。 (1)http 和 https 的基本概念: http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准(TCP)，用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。 HTTP 是一个基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于 1990 年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在 WWW 中使用的是 HTTP/1、0 的第六版，HTTP/1、1 的规范化工作正在进行之中，而且 HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP 协议工作于客户端-服务端架构为上。浏览器作为 HTTP 客户端通过 URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。 https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

day73 vue框架

阅读更多关于 day73 vue框架

1、可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会相互独立 <style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 260px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { width: 100%; /*height: 200px;*/ border-radius: 50%; } .box p { text-align: center; } </style></head><body> <div id="app"> <div class="wrap"> <tag></tag> <tag></tag> <tag></tag> <tag></tag> </div> </div></body><script src="js/vue.js"></script><script> let titleTag = { template: ` <p> <b> 这是一种纯二哈 </b> </p

订阅 localstorage